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