ビューポートを設定する

このルールは、ページでビューポートを指定していないことや、さまざまな端末に適応しないビューポートを指定していることを PageSpeed Insights が検出した場合にトリガーされます。

概要

ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

左: メタ ビューポートのないページ。
右: ビューポートが端末の幅に一致しているページ。

推奨される解決方法

携帯端末に適切に表示されるよう最適化されたページには、ドキュメントの先頭に width=device-width、initial-scale=1 を指定したメタ ビューポートが含まれています。

<meta name=viewport content="width=device-width, initial-scale=1">

その他の情報

用語:

  • ハードウェア ピクセル: ディスプレイ上の物理的なピクセル。たとえば、iPhone 5 には 640 水平ハードウェア ピクセルの画面が搭載されています。
  • デバイス非依存ピクセル(dip): 通常の表示距離で統一の参照ピクセルに一致させるための、デバイス ピクセルのスケーリング。すべての端末でほぼ同じサイズになります。iPhone 5 は幅 320 dip です。
  • CSS ピクセル: ビューポートによって制御されるページ レイアウトに使用する単位。スタイル内のピクセル サイズ(width: 100px など)は CSS ピクセル単位で指定します。CSS ピクセルとデバイス非依存ピクセルの比率は、ページのスケール係数やズームです。

携帯端末上の PC ページ

ページでビューポートが指定されていない場合、モバイル ブラウザではそのページを 800~1024 CSS ピクセルの代替幅でレンダリングします。ページがディスプレイに収まるようにページのスケール係数が調整されるため、ユーザーはそのページを操作する前にズームする必要があります。

メタ ビューポート タグ

メタ ビューポート タグは、ページのサイズとスケーリングの制御方法についてブラウザに指示を与えるもので、ドキュメントの先頭に含める必要があります。

固定幅のビューポート

ビューポートは width=320width=1024 などの特定の幅に設定できます。おすすめしませんが、この方法は、固定サイズのページを期待どおりに確実に表示するための応急措置として便利です。

レスポンシブなビューポート

メタデータ ビューポート値 width=device-width を使用すると、デバイス非依存ピクセル単位の画面の幅に合わせるようにページに指示します。さまざまな画面サイズに合わせてページのコンテンツをリフローできるようになります。

iOS や Windows Phone などの一部のブラウザでは、横向きに回転させたときにページの幅を一定に保ち、リフローせずにズームして画面を表示します。属性 initial-scale=1 を追加すると、画面の向きにかかわらず CSS ピクセルとデバイス非依存ピクセルを 1 対 1 の関係に保つようブラウザに指示するため、ページで横向きの幅全体を利用できるようになります。

左: iPhone 5 で width=device-width を回転させた場合、横向きの幅は 320px になります。
右: iPhone 5 で width=device-width、initial-scale=1 を回転させた場合、横向きの幅は 568px になります。

レスポンシブなビューポートを使用するには、さまざまな幅で機能するようにページを設計する必要があります。ヒントについては、ビューポートに合わせたコンテンツのサイズ変更に関する推奨事項をご覧ください。

その他の考慮事項

minimum-scalemaximum-scaleuser-scalable を避ける

最小および最大ズームを設定したり、ビューポートをズームする機能を完全に無効にしたりできます。これらのオプションはアクセシビリティに悪影響を与えるため、通常は避けてください。

@viewport

メタ ビューポート タグは広くサポートされていますが、正式な標準の一部ではありません。この動作は CSS Device Adaptation 仕様の一部として CSS に含まれます。この仕様が最終承認されて幅広く実装されるまでは、互換性のために、単独で、または対応する @viewport スタイルと一緒に、メタ ビューポート タグを使用し続けてください。

関連情報: