モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常にヘッド要素内にあります。SEO に携わる友人はメタに対して特別な感覚を持っているはずです。今日はモバイル プラットフォームのメタ タグについてお話します。メタ タグはモバイル プラットフォームにどのような魔法のような効果をもたらすのでしょうか。

1. メタビューポート

モバイル プラットフォームのメタ タグに関しては、ビューポートについて話す必要があります。では、ビューポートとは何でしょうか?
ビューポートは表示領域です。デスクトップ ブラウザーの場合、ビューポートは、ツールバー、ステータス バー、スクロール バーなどをすべて削除した後、Web ページを表示するために使用される領域を指します。従来の WEB ページの場合、幅 980 は標準で、iPhone で表示すると画面全体に表示されます。ただし、Web アプリの場合、これは問題になることがあります。iPhone では、Web アプリは通常、縦方向で幅 320 です。では、幅 320 のページは iPhone ではどのように表示されるのでしょうか。 iPhone の幅は 320 ではなく、画面全体を埋め尽くすような感じだと思う人もいるかもしれませんが、それは本当でしょうか? iPhoneに表示される次のレイアウトを見てみましょう

したがって、ビューポートを変更する必要があり、次のプロパティ値を設定する必要があります。

width: ビューポートの幅 (範囲は 200 から 10,000 ピクセル、デフォルトは 980 ピクセル)
高さ: ビューポートの高さ (範囲: 223 ～ 10,000)
initial-scale: 初期スケール (範囲: >0 から 10)
minimum-scale: ユーザーがズームできる最小スケール
最大スケール: ユーザーがズームできる最大スケール
ユーザースケーラブル: ユーザーが手動でスケールできるかどうか

これらのプロパティについては、1 つまたは複数のプロパティを設定できます。すべてを同時に設定する必要はありません。iPhone は、デフォルト値を直接使用するのではなく、設定したプロパティに基づいて他のプロパティ値を自動的に計算します。

initial-scale=1 に設定すると、縦向きモードでは幅と高さが自動的に 320*356 (アドレスバーなどがスペースを占めるため 320*480 ではありません)、横向きモードでは 480*208 になります。同様に、幅のみを設定すると、初期スケールと高さは自動的に推測されます。たとえば、width=320 に設定すると、ポートレートモードでは initial-scale は 1 になり、ランドスケープモードでは 1.5 になります。 では、Safari にこれらの設定を知らせるにはどうすればよいでしょうか?実際のところ、それは非常に単純で、次のようなメタだけです。

さて、これでページを全画面でレイアウトできるようになりました。ページが非常に小さく表示されることを心配する必要はありません。

2. メタフォーマット検出

明らかにリンク スタイルを追加せずに数字の文字列を入力しましたが、iPhone はテキストにリンク スタイルを自動的に追加し、番号をクリックすると自動的にダイヤルします。このダイヤルアップリンクを削除するにはどうすればよいですか?ここで、メタが機能する時が来ました。コードは次のとおりです。

telephone=no は、番号をダイヤルアップリンクに変換することを無効にします。
Telephone=yes は、番号をダイヤルアップ リンクに変換する機能をオンにします。変換機能をオンにするには、このメタを記述する必要はありません。デフォルトでオンになっています。

3. メタ: apple-mobile-web-app-capable

このメタの目的は、デフォルトの Apple ツールバーとメニュー バーを削除することです。 content には、「yes」と「no」の 2 つの値があります。ツールバーとメニュー バーを表示する必要がある場合は、このメタ行を追加する必要はありません。これはデフォルトで表示されます。

4. メタ アップル モバイル ウェブ アプリ ステータス バー スタイル