Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

HTML にビューポートのメタタグを含める

監査が重要である理由

ビューポートのメタタグがない場合、モバイル端末では、一般的なデスクトップの画面幅でページをレンダリングしたあと、モバイル画面に合わせてページをスケーリングします。 ビューポートを設定すると、ビューポートの幅とスケーリングを制御できるようになります。

詳細については、以下のリンクをご覧ください。

監査に合格する方法

HTML の <head> に、ビューポートの <meta> タグを追加します。

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

キーと値のペア width=device-width でビューポート幅と端末幅を指定し、initial-scale=1 でページにアクセスしたときの最初のズームレベルを指定します。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

Lighthouse では、ドキュメントの <head><meta name="viewport"> タグが存在するかチェックされます。 また、ノードに content 属性が含まれており、その属性値にテキスト width= が含まれていることも確認されます。ただし、widthdevice-width が等しいかは確認されません。また、キーと値のペア initial-scale も、Lighthouse ではチェックされません。