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

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

1. メタビューポート

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

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>メタビューポート</title>
<スタイルタイプ="text/css">
div,本文{
パディング:0;
マージン:0;
}
体{
パディング上部:100px;
色:#fff;
}
div{
幅:320ピクセル;
高さ:100px;
マージン:0 自動;
背景:#000;
テキスト配置:中央;
フォント:30px/100px Arial;
}
</スタイル>
</head>
<本文>
<div>
アプリ
</div>
</本文>
</html>

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

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 つの値があります。ツールバーとメニューバーを表示する必要がある場合は、このメタ行を追加する必要はありません。これはデフォルトで表示されます。