モバイルデバイス用のメタタグ設定の完全なリスト

序文

以前フロントエンドを勉強していたとき、メタタグに対する私の理解はこの一文だけでした。

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

しかし、どの Web サイトを開いても、そのヘッドタグ内にメタタグの列が表示されます。例えば、弊社の 123WORDPRESS.COM という Web サイトですが、私はこの Web サイトに慣れていなかったため、学習計画の前面にメタタグを追加しました。

<meta name=”viewport” content=”width=デバイス幅、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0、ユーザースケーラブル=いいえ”>

これは最もよく使用されます。width および height ディレクティブは、それぞれビューポートの論理的な幅と高さを指定します。値はピクセル単位の数値または特殊なマーカーシンボルのいずれかです。 width ディレクティブは、デバイス幅タグを使用して、ビューポートの幅がデバイスの画面幅であることを示します。同様に、height ディレクティブは device-height タグを使用して、ビューポートの高さがデバイスの画面の高さであることを示します。
user-scalable ディレクティブは、ユーザーがビューポートを拡大縮小できるかどうか、つまり Web ページのビューを拡大縮小できるかどうかを指定します。値が「はい」の場合、ユーザーはズームインまたはズームアウトできます。値が「いいえ」の場合、ズームインまたはズームアウトできません。

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

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

すべてのスマートフォンブラウザは、ViewPort <meta> タグの width および user-scalabel ディレクティブをサポートしています。しかし、Opera Mobile では、ユーザースケーラブルディレクティブは使用されず、代わりに、ユーザーがモバイルブラウザーで Web ページをズームする機能を常に保持する必要があることを主張しています。

以下は実際にはめったに使用されない

デバイスピクセル比

window.devicePixelRatio は、デバイス上の物理ピクセルとデバイス非依存ピクセル (dip) の比率です。計算式は次の通りです: window.devicePixelRatio = 物理ピクセル / ディップ

画面にフィットするウェブサイトの適応型スクリーン

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

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

Appleブラウザ関連

2015-07-08

<meta name=”ビューポート” content=”最小限のUI”>

iOS 7.1 の Safari では、メタタグに新しい minimal-ui 属性が追加され、Web ページの読み込み時に上部のアドレスバーと下部のナビゲーションバーを非表示にできるようになりました。

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

オプションを「はい」に設定すると、Web サイトはフルスクリーンモードでデフォルトの Apple ツールバーとメニューバーを削除します。

<meta name=”apple-touch-fullscreen” content=”yes”>

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

<meta name=”format-detection” content=”telephone=no”>
<meta name=”フォーマット検出” 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-touch-icon

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-icon” sizes=”76×76″ href=”touch-icon-ipad.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”touch-icon-iphone-retina.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”touch-icon-ipad-retina.png”>

iOS 7 より前のバージョンでは、システムはデフォルトでアイコンに特殊効果 (角丸やハイライト) を追加します。システムによる特殊効果の追加を望まない場合は、apple-touch-icon.png の代わりに apple-touch-icon-precomposed.png を使用できます。

アイコンの使用優先順位は次のとおりです。

デバイスの推奨サイズに一致するアイコンがない場合は、推奨サイズよりも大きいが、推奨サイズに最も近いアイコンが最初に使用されます。

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

推奨サイズを満たすアイコンが複数ある場合は、事前に作成されたキーワードを含むアイコンが優先されます。

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

注意: iOS 7 では、アイコンに特殊効果が追加されなくなりました。iOS 7 より前では、アイコンにキーワード -precomposed.png がサフィックスとして付いていない限り、特殊効果はデフォルトでアイコンに追加されていました。

インターネットエクスプローラー

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

<meta name=”MobileOptimized” content=”320″> IE Mobile 用に Microsoft が設定した定義済み幅タグ

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

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

UCブラウザ

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

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

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

QQブラウザ

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

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

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

360 ブラウザ

<meta name=”renderer” content=”webkit”>高速モードをオンにする

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

携帯電話特有の機能は何ですか？

<meta content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=0" name="ビューポート">     

<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 にし、ユーザーが画面をクリックして拡大できないようにします。

幅 - ビューポートの幅高さ - ビューポートの高さ
initial-scale - 初期スケール
minimum-scale - ユーザーがズームできる最小スケール
最大スケール - ユーザーがズームできる最大スケール
ユーザースケーラブル - ユーザーが手動でスケールできるかどうか

2 番目のメタタグは、iPhone デバイス上の Safari 用のプライベートメタタグであり、フルスクリーンモードでのブラウジングを許可することを意味します。

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

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

デフォルト値は default (白) で、black (黒) と black-translucent (グレーの半透明) に設定できます。

注:値が「black-translucent」の場合、ページの px 位置を占め、ページの上に浮かびます (ページの高さの 20 px をカバーします - iPhone4 および itouch4 の Retina 画面の場合は 40 px)。

4 番目のメタタグには、ページ内の数字を電話番号として認識しないようにデバイスに指示する、と書かれています。

大手メーカーのモバイルページメタを見てみましょう

1. 天猫

<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=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ"/>
<meta name="format-detection" content="電話番号=いいえ、住所=いいえ">

2. タオバオ

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

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

<meta コンテンツ="はい" 名前="アップルタッチフルスクリーン"/> 

<meta content="電話=いいえ、メール=いいえ" name="フォーマット検出"/> 

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

<meta name="ビューポート" content="初期スケール=0.5、最大スケール=0.5、最小スケール=0.5、ユーザースケーラブル=いいえ">

3. JD.com

<title>JD.com - モバイル版</title>

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=0;">

<meta http-equiv="コンテンツタイプ" 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="有効期限" content="-1">

<meta http-equiv="キャッシュコントロール" content="キャッシュなし">

<meta http-equiv="プラグマ" content="キャッシュなし">

<meta name="キーワード" content="">

<meta name="説明" コンテンツ="">

4. ネットイース

<title>ネットイースモバイル</title>

<meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、最小スケール=1、ユーザースケーラブル=いいえ">

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

<meta name="キーワード" content="" />

<meta name="説明" コンテンツ="" />

5. 百度

<meta name="referrer" content="always">

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

<meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">

<meta name="format-detection" content="telephone=no">

6. 捜狐

<title>捜狐モバイル</title>
                            
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />

<meta http-equiv="キャッシュ制御" content="キャッシュなし" />

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

<meta name="モバイル最適化" content="320"/>

<meta name="説明" コンテンツ="" />

<meta name="キーワード" 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 = 'ビューポート' コンテンツ = "width=320">

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

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

initial-scale=1.0 初期値

最大スケール=1.0

最小スケール=1.0

—————————————————————————————–

<meta name=”viewport” content=”width=デバイス幅、user-scalable=no”>

user-scalable=no/0 ページのユーザースケーリングを無効にする

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

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

<meta name=”viewport” content=”width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=0″>

maximum-scale=1.0 最大ズーム比（Huawei Meta8などの個々の携帯電話の場合）

—————————————————————————————–

Apple デバイス固有のメタ:

<!—Web ページをアプリとして実行できるようにします (ホーム画面に追加できるようにします)—>

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

<!—ステータスバーの色—>

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

JDメタ:

<meta name=”viewport” content=”width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=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” content=”telephone=no,email=no”>

タオバオメタ:

<メタコンテンツ=”はい” 名前=”アップルモバイルウェブアプリ対応”>

<!–ページ領域をクリックすると全画面で表示されます—>

<meta コンテンツ="はい" 名前="アップルタッチフルスクリーン"/>

<meta content="電話=いいえ、メール=いいえ" name="フォーマット検出"/>

<!– アプリケーション情報、システム履歴の保持、モーション効果–>

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

その他のメタ:

<!–360 ブラウザで Chrome カーネルを使用してページをレンダリングするように強制します–>

<meta name=”レンダラー” content=”webkit”>

<!–最新の IE レンダリング モードを使用するようにしてください–>

<meta http-equiv="X-UA-compatible" content="IE=edge">

<!– ハンドヘルド デバイス向けに最適化されています。主に、BlackBerry などのビューポートを認識しない古いブラウザー向けです–>

<メタ名=”ハンドヘルドフレンドリー” コンテンツ=”true”>

<!–Microsoft の古いブラウザ–>

<メタ名=”モバイル最適化” コンテンツ=”320″>

<!– uc は垂直画面を強制します–>

<meta name=”画面の向き” content=”縦向き”>

<!– QQ 強制縦画面–>

<meta name=”x5-orientation” content=”portrait”>

<!– UC 強制フルスクリーン–>

<meta name=”フルスクリーン” content=”はい”>

<!– QQ 強制全画面表示–>

<メタ名=”x5-fullscreen” コンテンツ=”true”>

<!– UC アプリケーション モード–>

<meta name=”ブラウザモード” content=”アプリケーション”>

<!– QQ アプリケーション モード–>

<メタ名=”x5-ページモード” コンテンツ=”アプリ”>

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

<<: ホスト上のDockerコンテナ内でシェルまたはプログラムを実行する

>>: vue3.0 のウォッチリスナーの例の詳細な説明