デスクトップ プラットフォームの Web レイアウトのメタ タグは、常に head 要素内に配置されていることによく知られています。今日は、モバイル プラットフォームのメタ タグについて説明します。 、モバイル プラットフォームにおけるメタ タグの魔法の効果とは何ですか?
1. メタ ビューポート
モバイル プラットフォームのメタ タグと言えば、ビューポートについて話さなければなりません。それでは、ビューポートとは何でしょうか?
ビューポートは、デスクトップ ブラウザの場合、すべてのツールバー、ステータス バー、スクロール バーなどを削除した後に Web ページを表示するために使用される領域を指します。
。従来の Web ページの場合、iPhone では幅 980 が表示されるのが通常であり、画面全体にも表示されますが、Web アプリの場合、通常、Web アプリの幅は 980 です。ポートレート モードで 100cm、320 の場合、iPhone では 320 のページがどのように表示されますか? iPhoneの幅は320mmではなく、画面いっぱいに収まるはずだと思う人もいるかもしれませんが、実際はどうなのでしょうか?次のレイアウトが iPhone でどのように表示されるかを見てみましょう
したがって、ビューポートを変更する必要があります。設定できる属性値は次のとおりです。
width: ビューポートの幅 (200 ~ 10,000 の範囲、デフォルトは 980 ピクセル)
height: ビューポートの高さ (223 ~ 10,000 の範囲)
initial-scale: 初期スケーリング (> の範囲) ;0 ~ 10)
minimum-scale: ユーザーがズームできる最小比率
maximum-scale: ユーザーがズームできる最大比率
user-scalable:ユーザーは手動でズームできます
これらの属性については、1 つ以上を設定できます。すべてを同時に設定する必要はありません。iPhone は、設定した属性に基づいて他の属性値を自動的に計算します。デフォルト値を直接使用します。
initial-scale=1 に設定すると、幅と高さはポートレート モードでは自動的に 320*356 (アドレス バーなどがすべてスペースを占めるため 320*480 ではありません)、ランドスケープ モードでは 480*208 になります。同様に、幅のみを設定した場合、初期スケールと高さは自動的に計算されます。たとえば、width=320 に設定した場合、初期スケールは、画面が縦向きモードの場合は 1 ですが、画面が横向きの場合は 1.5 になります。 では、これらの設定はどのようにして Safari に通知されるのでしょうか?実際、これは非常に単純で、次の形式の単なるメタです:
telephone=yes により、番号をダイヤルアップ リンクに変換できます。変換機能を有効にするために、このメタを記述する必要はありません。デフォルトで有効になっています。
3. Meta の apple-mobile-web-app-capable
このメタの機能は、デフォルトの Apple ツールバーとメニュー バーを削除することです。 content には「yes」と「no」の 2 つの値があります。ツールバーとメニューバーを表示する必要がある場合、デフォルトではこの行を追加する必要はありません。
4. apple-mobile-web-app-status-bar-style のメタ