監査が重要である理由
ビューポートのメタタグがない場合、モバイル端末では、一般的なデスクトップの画面幅でページをレンダリングしたあと、モバイル画面に合わせてページをスケーリングします。 ビューポートを設定すると、ビューポートの幅とスケーリングを制御できるようになります。
詳細については、以下のリンクをご覧ください。
監査に合格する方法
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=
が含まれていることも確認されます。ただし、width
と device-width
が等しいかは確認されません。また、キーと値のペア initial-scale
も、Lighthouse ではチェックされません。