ビューポートのメタタグがない場合、モバイル デバイスでは、一般的なデスクトップの画面幅でページをレンダリングしたあと、ページを縮小して読みづらくします。
ビューポートの meta タグを設定すると、ビューポートの幅とスケーリングを制御して、すべてのデバイスで適切なサイズになるようにできます。
Lighthouse のビューポート メタタグ監査が失敗する仕組み
Lighthouse は、ビューポート メタタグのないページを報告します。
ページは、次の条件がすべて満たされていない限り、監査に合格しません。
- ドキュメントの <head> に <meta name="viewport"> タグが含まれている。- ビューポート メタタグに content 属性が含まれています。- content 属性の値にテキスト width= が含まれています。
ビューポート メタタグを追加する方法
ページの <head> に、適切な Key-Value ペアを含むビューポート <meta> タグを追加します。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
各 Key-Value ペアは次の処理を行います。
- width=device-width: ビューポートの幅をデバイスの幅に設定します。- initial-scale=1 は、ユーザーがページにアクセスしたときのデフォルトのズームレベルを設定します。
初期スケールが 1 未満
initial-scale が 1 未満に設定されている場合、ブラウザでダブルタップしてズームする機能が有効になることがあります。この機能は通常、モバイル向けに最適化されていないパソコン向けサイトに使用されます。これにより、2 回目の「ダブル」タップが発生したかどうかをブラウザが確認する間、タップ操作に 300 ミリ秒の遅延が発生します。そのため、initial-scale が 1 未満に設定されている場合も、監査は失敗します。