モバイルプラットフォーム開発におけるメタタグの適用例-htmlチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-03 16:21:44

オリジナル

1174 人が閲覧しました

この記事では、主にモバイルプラットフォーム開発におけるメタタグの詳細なアプリケーションを紹介します。必要な方は参照してください。

デスクトッププラットフォームの Web レイアウトのメタタグは常に head 要素内にあります。 SEO の友人は、メタに対して特別な感情を持っているはずです。今日は、モバイルプラットフォームのメタタグについて説明します。

1. メタのビューポート

モバイルプラットフォームのメタタグと言えば、ビューポートについて話さなければなりません。
ビューポートは、デスクトップブラウザの場合、すべてのツールバー、ステータスバー、スクロールバーなどを削除した後にWebページを表示するために使用される領域を指します
。従来の Web ページの場合、iPhone では幅 980 が表示されるのが通常であり、画面全体にも表示されますが、Web アプリの場合、通常、Web アプリの幅は 980 です。ポートレートモードで 100cm、320 の場合、iPhone では 320 のページがどのように表示されますか? iPhoneの幅は320mmではないので、画面いっぱいに収まるはずだと思う人もいるかもしれませんが、実際はどうなのでしょうか？ iPhone で次のレイアウトの表示を見てみましょう

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Viewport</title>
<style type="text/css">
p,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:#fff;
}
p{
width:320px;
height:100px;
margin:0 auto;
background:#000;
text-align:center;
font:30px/100px Arial;
}
</style>
</head>
<body>
<p>
AppUE
</p>
</body>
</html>

ログイン後にコピー

したがって、次の属性値を設定する必要があります:

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

これらのプロパティについては、それらの 1 つ以上を設定します。すべてを同時に設定する必要はありません。設定された属性は、デフォルト値を直接採用するのではなく、他の属性の値を自動的に推測します。

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

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

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

ログイン後にコピー

さて、ページを全画面でレイアウトできます。ページの表示を心配する必要はもうありません。非常に少ない！

2. Meta のフォーマット検出

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

<meta name=”format-detection” content=”telephone=no” />

ログイン後にコピー

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

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

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

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

<meta name=”apple-mobile-web-app-capable” content=”yes” />

ログイン後にコピー

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

4. Meta の apple-mobile-web-app-status-bar-style

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

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

ログイン後にコピー

関数はステータスバーの表示スタイルを制御することです

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

status-bar-style:black
status-bar-style:black-translucent

ログイン後にコピー

その他のメタタグモバイルプラットフォーム開発におけるアプリケーション導入事例に関する記事は、PHP中国語サイトに注目してください！