幅または初期スケールのタグがない

viewport メタタグがないと、モバイル デバイスで一般的なパソコン画面の幅でページをレンダリングした後、縮小されて読みにくくなります。

ビューポート メタタグを設定すると、ビューポートの幅とスケーリングを制御して、すべてのデバイスで適切なサイズを設定できます。

Lighthouse ビューポート メタタグの監査が失敗する仕組み

Lighthouse では、ビューポート メタタグのないページにフラグが設定されます。

Lighthouse の監査でページにビューポートがないことが示される

次のすべての条件が満たされない限り、ページは監査に不合格となります。 - ドキュメントの <head> に <meta name="viewport"> タグが含まれている。 - ビューポート メタタグに content 属性が含まれている。 - content 属性の値にテキスト width= が含まれている。

ビューポート メタタグを追加する方法

適切な Key-Value ペアを含むビューポートの <meta> タグをページの <head> に追加します。

<!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 未満に設定されていると、ブラウザでダブルタップによるズーム機能が有効になります。この機能は通常、モバイル用に最適化されていない PC サイトで使用されます。これにより、ブラウザが 2 回目の「ダブル」タップが行われるかどうかを確認するまで、タップ操作に 300 ミリ秒の遅延が発生します。そのため、初期スケールが 1 未満に設定されている場合も監査は失敗します。

リソース