モバイル端末向けメタタグ設定一式

前回のフロントエンドの勉強ではメタタグの理解はこの一文だけでした。

 <メタ文字セット=UTF-8>

しかし、Web サイトを開くと、head タグの中にメタ タグの列があります。例えば、VeVb武道のWebサイトがありますが、私は詳しくないので、学習計画書の先頭にメタタグを追加しました。

 <meta name=viewport content=width=デバイス幅、initial-scale=1.0、maximum-scale=1.0、minimum-scale=1.0、user-scalable=no>

これは最も一般的に使用され、幅と高さの命令はそれぞれビューポートの論理的な幅と高さを指定します。それらの値は、ピクセル単位の数値または特別なマーカー シンボルのいずれかです。 width ディレクティブは、device-width タグを使用して、ビューポートの幅がデバイスの画面幅である必要があることを示します。同様に、高さディレクティブは device-height フラグを使用して、ビューポートの高さがデバイスの画面の高さであることを示します。

ユーザー スケーラブル ディレクティブは、ユーザーがビューポート、つまり Web ページのビューをズームできるかどうかを指定します。値が「yes」の場合、ユーザーはズームできます。値が「no」の場合、ズームは禁止されます。

初期スケール ディレクティブは、Web ページの初期スケーリングを設定するために使用されます。デフォルトの初期スケーリング値はスマートフォンのブラウザによって異なります。通常、デバイスはブラウザーで Web ページ全体をレンダリングします。これを 1.0 に設定すると、拡大縮小されていない Web ドキュメントが表示されます。

Maximum-scale ディレクティブと minimum-scale ディレクティブは、Web ページのズーム率に対するユーザーの制限を設定するために使用されます。値の範囲は 0.25 ～ 10.0 です。初期スケールと同様に、これらのディレクティブの値は、ビューポートのコンテンツに適用されるスケーリングです。

すべてのスマートフォンのブラウザは、ViewPort <meta> タグの幅とユーザー スケーラベル ディレクティブをサポートしています。しかし、Opera Mobile はユーザー スケーラブル ディレクティブを使用せず、代わりにユーザーはモバイル ブラウザーで Web ページをズームできる機能を常に保持すべきであると主張しています。

window.devicePixelRatio は、デバイス上の物理ピクセルとデバイスに依存しないピクセル (ディップ) の比率です。数式は次のとおりです: window.devicePixelRatio = 物理ピクセル/ディップ

コンテンツの値が画面の幅以下の場合、Web サイトの画面に合わせた適応機能はオフになり、Web サイトはブラウザーの伸縮に合わせて拡大縮小されません。

コンテンツの値が画面の幅より大きい場合、画面に合わせるが有効になります。

2015-07-08

 <meta name=viewport content=minimal-ui>

iOS 7.1 の Safari では、meta タグに minimum-ui 属性が追加され、Web ページの読み込み時に上部のアドレス バーと下部のナビゲーション バーを非表示にすることができます。

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

Web アプリ機能を有効にするかどうかを [はい] に設定すると、Web サイトは全画面モードでデフォルトの Apple ツールバーとメニュー バーを削除します。

 <メタ名=apple-touch-fullscreen content=yes>

Web アプリ プログラムのサポートを有効にする

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

iPhone はテキストにリンク スタイルを自動的に追加し、番号をクリックすると自動的にその番号にダイヤルされます。

Telephone=no は、ページ上の番号を無視し、電話番号として識別します。

Telephone=yes は、番号のダイヤルアップ リンクへの変換をオンにします。これはデフォルトでオンになっています。

 <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 />

ステータスバーの表示スタイルを制御します デフォルト (白) 黒 (黒) 黒半透明 (グレー半透明)

apple-mobile-web-app-capable が yes に設定されている場合、「ホーム画面に追加」ボタンを使用して、iPhone、iPad、および iTouch Safari のホーム画面に Web サイトを追加できます。

対応する apple-touch-icon タグを設定すると、ホーム画面に追加されるアイコンに指定した画像が使用されます。

以下は、さまざまな ox デバイスに最適なアイコンを選択する方法です。 iPhone のデフォルト サイズは 60 ピクセル、iPad は 76 ピクセル、Retina スクリーンは 2 倍になります。

 <link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-iconsize=76×76″ href=touch-icon-ipad.png><link rel=apple- touch-icon のサイズ=120×120'' href=touch-icon-iphone-retina.png><link rel=apple-touch-iconサイズ=152×152インチ href=touch-icon-ipad-retina.png>

ios7 より前では、システムはデフォルトでアイコンに特殊効果 (丸い角とハイライト) を追加します。システムに特殊効果を追加したくない場合は、apple-touch-icon-precomused.png の代わりに使用できます。アイコン.png。

対応デバイスの推奨サイズに一致するアイコンがない場合は、推奨サイズより大きく、推奨サイズに近いアイコンが優先して使用されます。

推奨サイズより大きいアイコンがない場合は、推奨サイズに最も近いアイコンが最初に選択されます。

推奨サイズを満たすアイコンが複数ある場合は、プリコンポーズされたキーワードを含むアイコンが最初に選択されます。

このエリアで link タグを使用してアイコンを指定しない場合は、Web サイトのルート ディレクトリで apple-touch-icon というプレフィックスが付いた png アイコンが自動的に検索されます。

<meta http-equiv=X-UA-Compatible content=IE=edge> IE が互換モードを使用できないようにします

<meta name=MobileOptimized content=320″> Microsoft が IE Mobile バージョン用に設定した定義幅タグ

ブラウザはファイルのサイズを自動的に調整しません。つまり、ファイルは固定サイズであり、ブラウザに合わせて伸縮したり拡大したりすることはありません。

<meta name=HandheldFriendly content=true /> : ハンドヘルド デバイスに優しいかどうか、true または false のみ

<meta name=screen-orientation content=portrait>垂直画面を強制する

<meta name=full-screen content=yes>全画面表示を強制する

<meta name=browsermode content=application>アプリケーションモード

<meta name=x5-orientation content=portrait>垂直画面を強制する

<meta name=x5-fullscreen content=true>全画面表示を強制する

<meta name=x5-page-mode content=app>アプリケーションモード

<meta name=renderer content=webkit>ラピッドモードを有効にする

メタとは、検索エンジンの説明やキーワード、更新頻度など、ページに関するメタ情報を提供する要素を指します。 タグはドキュメントの先頭にあり、コンテンツは含まれません。 タグのプロパティは、ドキュメントに関連付けられた名前と値のペアを定義します。

 <meta content=width=デバイス幅、initial-scale=1.0、maximum-scale=1.0、user-scalable=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta content=black name=apple-mobile-web-app-status-bar-style> <meta content=telephone=no name=format-detection>

最初のメタ タグは、ドキュメントの幅とデバイスの幅を 1:1 のままに強制し、ドキュメントの最大幅比は 1.0 であり、ユーザーは画面をクリックしてビューを拡大することを許可されないことを意味します。

• width - ビューポートの幅 height - ビューポートの高さ
• 初期スケール - 初期スケーリング率
• minimum-scale - ユーザーがズームできる最小スケール
• 最大スケール - ユーザーがズームできる最大スケール
• user-scalable - ユーザーが手動でスケーリングできるかどうか

2 番目のメタ タグは、iPhone デバイスの Safari プライベート メタ タグです。これは、全画面モードでの閲覧を許可することを意味します。

3 番目のメタ タグも iPhone のプライベート タグであり、iPhone の Safari の上部にあるステータス バーのスタイルを指定します。

Web アプリ アプリケーションのステータス バー (画面の上部バー) の色。

デフォルト値はデフォルト (白) ですが、黒 (黒) および黒半透明 (グレー半透明) に設定できます。

4 番目のメタ タグは、ページ上の番号を電話番号として無視するようにデバイスに指示することを意味します。

 <meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, address=no>

 <meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewportコンテンツ = 初期スケール = 0.5、最大スケール = 0.5、最小スケール = 0.5、ユーザー スケーラブル = no>

 <title>Jingdong-Mobile バージョン</title><meta name=viewport content=width=device-width、initial-scale=1.0、maximum-scale=1.0、user-scalable=0;><meta http-equiv=Content -Type content=text/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=Expires content=-1><meta http-equiv=キャッシュ制御 content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Keywords content=><meta name=description content=>

 <title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, minimum-scale=1, minimum-scale=1, user-scalable=no><meta content = Telephone=no name=format-detection /><meta name=keywords content= /><meta name=description content= />

 <meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=no><メタ名前=フォーマット検出コンテンツ=電話=いいえ>

 <title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache /><メタ名=ビューポートコンテンツ=幅=デバイス幅、ユーザースケーラブル=いいえ、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0 /><メタname=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />

----

 <meta name=viewport content=width=device-width、user-scalable=no、initial-scale=1.0、maximum-scale=1.0、minimum-scale=1.0''>

ビューポート -> ウィンドウ (表示領域)

width=デバイス幅 デバイス幅

 <metaname = 'viewport 'content = width=320><metaname = 'viewport 'content = width=デバイス幅>

user-scalable=no/0 スケーリングを許可するかどうか

Initial-scale=1.0 初期値

最大スケール=1.0

最小スケール=1.0

------------------------

 <meta name=viewport content=width=device-width, user-scalable=no>

user-scalable=no/0 は、ユーザーによるページの拡大縮小を無効にします

 <meta name=viewport content=width=device-width、user-scalable=no、initial-scale=1.0″>

Initial-scale=1.0 ページのズーム率を初期化します

 <meta name=viewport content=width=device-width、initial-scale=1.0、maximum-scale=1.0、user-scalable=0''>

Maximum-scale=1.0 最大スケーリング比 (個々の携帯電話 Huawei Meta8 の場合)

------------------------

 <!—Web ページをアプリとして実行できるようにする (ホーム画面への追加を許可する)—><meta name=apple-mobile-web-app-capable content=yes><!—ステータス バーの色—><meta name=apple- mobile -web-app-status-bar-style content=black>

 <meta name=viewport content=width=device-width、initial-scale=1.0、maximum-scale=1.0、user-scalable=0″><meta name=apple-mobile-web-app-capable content=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><!—禁止されている電話番号と電子メール アドレス—><meta name=format-detectionコンテンツ=電話=いいえ、電子メール=いいえ>

 <meta content=yes name=apple-mobile-web-app-capable><!–全画面で表示するにはページ領域をクリックします—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-detection/><!–アプリケーション情報、システム履歴の保持、モーション効果–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>

 <!–ページのレンダリングに Chrome カーネルの使用を 360 ブラウザに強制します–><meta name=renderer content=webkit><!–IE の最新モードを使用してレンダリングを試みます–><meta http-equiv=X-UA -互換コンテンツ=IE=edge><!–主にビューポートを認識しない一部の古いブラウザ（BlackBerry など）用のハンドヘルド デバイス用に最適化–><meta name=HandheldFriendly content=true><!–Microsoft の古いブラウザ–><meta name=MobileOptimized content=320″><!– uc は垂直画面を強制します–><meta name=screen-orientation content=portrait><!– QQ は垂直画面を強制します–><meta name=x5-orientation content=portrait><!– UC は全画面表示を強制します–><meta name=full-screen content=yes><!– QQ は全画面を強制します –><meta name=x5-fullscreen content=true><!– UC アプリケーション モード –><meta name=browsermode content=application><!– QQ application mode –><meta name=x5-page-モードコンテンツ=アプリ>

以上がこの記事の内容です。この記事の内容が皆様の学習や仕事の参考になれば幸いです。ご質問がございましたら、VeVb Wulin へのサポートに感謝いたします。ネットワーク。