ビューポートは、ページのコンテンツが表示されるブラウザ ウィンドウの一部です。ページのコンテンツの幅がビューポートの幅より大きい場合、モバイル画面では正しくレンダリングされない可能性があります。たとえば、コンテンツの幅が大きすぎると、コンテンツが収まるように縮小されて、テキストが読みづらくなることがあります。
Lighthouse のコンテンツ幅の監査が失敗する仕組み
Lighthouse では、幅がビューポートの幅と等しくないページにフラグが設定されます。
window.innerWidth
が window.outerWidth
と等しくない場合、監査は失敗します。
ページをモバイル画面に合わせて調整する方法
この監査は、ページがモバイル デバイス向けに最適化されているかどうかを判定する、迂回的な方法です。 モバイル フレンドリーなページの作成方法の概要については、レスポンシブ ウェブ デザインの基本をご覧ください。
次の場合は、この監査を無視できます。
- サイトをモバイル画面向けに最適化する必要はありません。
- ページのコンテンツの幅を、ビューポートの幅を意図的に小さくしたり大きくしたりしている。