ヘルプとドキュメント
UX / UI 重大な影響 簡単 2分
ビューポート/モバイルディスプレイ
メタ ビューポートにより、モバイルでの正しい表示が保証されます。
それは何ですか
ビューポート メタ タグは、デバイスの幅に合わせてページを拡大縮小する方法をブラウザーに指示します。これがないと、モバイルはデスクトップの幅でレンダリングし、すべてが「小さくてズームアウト」されます。
なぜそれに対処するのでしょうか？
Google はモバイルを優先してインデックスを作成します。主にモバイル バージョンを評価します。ほとんどの訪問はモバイルから行われるため、正しいビューポートがないと、サイトはモバイル ユーザビリティ テストに合格せず、ランキングが直接低下します。
やり方
- 1標準ビューポートメタタグを <head> に追加します。
- 2ズームを無効にしないでください (maximum-scale=1 / user-scalable=no)。アクセシビリティに悪影響を及ぼします。
- 3コンテンツが水平方向にオーバーフローしていないこと、およびボタンが十分な大きさであることを確認します (UX 監査を参照)。
例
Správně
<meta name="viewport" content="width=device-width, initial-scale=1">結論
頭の中にある一行ですが、モバイルファーストの世界には不可欠です。これがなければ、サイトはモバイルでは事実上使用できず、Google はこれに重いペナルティを課します。導入後、実際の電話機とモバイル ユーザビリティ ツールでテストします。
関連トピック