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

ビューポート メタタグを使用しない場合 モバイル デバイスでは、標準的なパソコン画面の幅でページをレンダリングしてから、 読みづらくなります。

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

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

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 秒の「double」チェックを待機している間、タップ操作に 300 ミリ秒の遅延が追加されます。タップします。そのため、初期尺度が 1 未満に設定されている場合も、監査は失敗します。

リソース