seo/viewport · ビューポート

レスポンシブ表示のための viewport メタタグを宣言しましょう。

重大度: warning

チェック内容

すべてのルートには <meta name="viewport"> を含めるべきです（通常は app.html で一度だけ設定します）。ないルートを検出します。

なぜ重要か

viewport メタタグがないと、モバイルブラウザはページを固定幅約 980px のレイアウトビューポートで描画してから縮小表示するため、テキストや操作要素が小さくなりすぎてピンチズームなしでは読んだりタップしたりできなくなります。

修正方法

通常は src/app.html に viewport メタタグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1" />

モードによる違い

レンダリング解析のみ（Vite プラグインのビルド、ダッシュボードで訪問したルート）。このタグは src/app.html にあり、ソース解析（CLI、ダッシュボードの静的ベースライン）はそれを解決しないため、ソース解析ではこのルールは何も報告しません。

無効化

既存の検出は suppressions ファイルに記録して抑制できます（npx svelte-vitals --update-suppressions）。overrides でルートやパス単位に絞るか、ルールごと無効化するには、次のように設定します。

export default {
  rules: {
    'seo/viewport': 'off'
  }
};