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

高洛峰
リリース: 2017-03-03 16:21:44
オリジナル
1127 人が閲覧しました

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

デスクトップ プラットフォームの 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中国語サイトに注目してください!

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!