この記事では、主にモバイル プラットフォーム開発におけるメタ タグの詳細なアプリケーションを紹介します。必要な方は参照してください。
デスクトップ プラットフォームの 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中国語サイトに注目してください!