概要
このチェックは、別のビューポートガイドでより技術的に説明されている同じビューポートメタタグを扱いますが、モバイル訪問者が実際に体験することの角度から見ています — それがないと、電話のブラウザはページがはるかに広いデスクトップ画面用に作られていると想定し、全体を縮小して収め、その結果、小さくて読みにくいテキストと、通常に読むためだけに常にピンチとスクロールが必要なレイアウトになります。
今日のほとんどのサイト、特にすでに本当にレスポンシブなデザインが組み込まれているサイトにとって、これは純粋に設定の欠落の問題であり、デザインの問題ではありません — レスポンシブなレイアウトは存在していますが、単に有効化される機会を与えられていないだけです。
重要な理由
今日のほとんどのウェブサイトでは、モバイル訪問者が総トラフィックの半分以上を占めているため、これほど根本的なモバイルレンダリングの問題は小さな例外的なケースではありません — サイトを訪問するすべての人の大多数に影響を与えることが非常に多いのです。電話で壊れて窮屈でナビゲートしにくく見えるページに着地した訪問者は、通常サイズのテキストを読むためにピンチやズームと格闘するよりも、はるかに早く離脱する可能性が高くなります。
この特定の問題は、チェックされた瞬間に視覚的に非常に明白であるため(単に電話でサイトを開くだけ)、根本的な設定が修正された後に修正が確認できる最も速いことの1つでもあります。
修正方法
- 実際の電話でサイトを開くか、ブラウザに組み込まれたモバイルプレビュー/デバイスツールバー(通常は開発者ツールで利用可能)を使用しましょう。
- ページが適切にサイズ設定されたモバイルレイアウトではなく、縮小されたデスクトップレイアウトのように見える場合、この設定が原因である可能性が非常に高いです。
- 正確なコード修正については、技術的なビューポートガイドを参照してください — 1つの
<meta name="viewport">タグが事実上あらゆるケースでこれを解決します。 - ウェブサイトビルダーを使用している場合、これはほぼすべてのケースでプラットフォームによって自動的に設定されます — そこでモバイル表示が壊れている場合、通常は代わりにそれに干渉するカスタムコード埋め込みを示しています。
- 修正後に電話でページを再確認し、ズームせずにテキストとレイアウトが正しくサイズ設定されるようになったことを確認しましょう。