コンテンツのサイズをビューポートに合わせる

このルールは、ページのコンテンツが指定されたビューポート サイズ内に水平に収まらないため、ユーザーがすべてのコンテンツを表示するために横方向にパンする必要があることを PageSpeed Insights が検出した場合にトリガーされます。

概要

パソコンでも携帯端末でも、ユーザーはウェブサイトを縦にスクロールするのには慣れていますが、横にスクロールするのには慣れていません。ページ全体を表示するために横にスクロールしたり、縮小したりする必要があると、ユーザーの利便性が低下します。

メタ ビューポート タグを使ってモバイル サイトを開発する場合、指定されたビューポートに収まらないページ コンテンツを誤って作成しやすくなります。たとえば、ビューポートよりも広い幅で表示される画像があると、ビューポートの横へのスクロールが生じる場合があります。ユーザーが横にスクロールしなくて済むように、ビューポートの幅に収まるようにコンテンツを調整してください。

推奨される解決方法

画面サイズは端末によって大きく異なるため(携帯電話とタブレットの違い、携帯電話の機種の違いなど)、さまざまな端末でページが正しく表示されるようにビューポートを設定する必要があります。しかし、ビューポートの幅(CSS ピクセル単位)は変わる場合があるため、ページ コンテンの表示を特定のビューポートの幅に依存しないようにしてください。

  • ページ要素の CSS の幅に大きな絶対値を設定する(div{width:360px;} など)のは避けてください。幅の狭い端末(例: iPhone などの幅が 320 CSS ピクセルの端末)では、ビューポートに対して要素が広すぎる場合があるためです。代わりに、相対的な幅の値を使用します(width:100% など)。同様に、配置の値として大きな絶対値を使用すると、小さな画面では要素がビューポートの範囲から外れる場合があるため、注意してください。
  • 必要な場合は、CSS メディア クエリを使用して、大小の画面に異なるスタイルを適用できます。HTML5 Rocks のこちらの記事(英語)では、この方法の推奨事項について詳しく説明しています。
  • 画像については、レンダリング中に不要なページのリフローを行わずに、柔軟にサイズ変更して画像を配信する方法について、こちらの記事でわかりやすく説明しています。