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

ビューポートの meta タグがないと、モバイル デバイスでは一般的なパソコン画面の幅でページがレンダリングされ、ページが縮小されるため、読みづらくなります。

viewport メタタグを設定すると、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 は、ユーザーがページにアクセスしたときの初期ズームレベルを設定します。

initial-scale が 1 未満

initial-scale が 1 未満に設定されている場合、ブラウザでダブルタップでズームする機能が有効になることがあります。この機能は通常、モバイル向けに最適化されていないパソコン用サイトで使用されます。これにより、ブラウザが 2 回目の「ダブル」タップが発生するかどうかを確認する間、タップ操作に 300 ミリ秒の遅延が追加されます。したがって、initial-scale が 1 未満に設定されている場合も監査は失敗します。

リソース