Viewport Meta Generator

使い方

1. width を設定します — レスポンシブなら device-width、固定幅レイアウトならピクセル値です。
2. initial-scale を設定します。通常は 1 で、1 より大きいと最初の描画が拡大されます。
3. minimum-scale または maximum-scale にチェックを入れたときだけ、その 2 つがタグに書き出されます。値は隣の入力欄で指定します。
4. user-scalable と viewport-fit を選びます。auto（省略）のままなら、タグには現れません。
5. プリセットを押すとフォーム全体が埋まり、コピーでタグを取得できます。

4 つのプリセットはモバイルファースト、ズーム固定、タブレット向け、ノッチ対応をカバーします。プリセットは値をフォームに書き戻して同じ生成経路を通るだけなので、適用後でも自由に調整できます。

よくある用途

• レスポンシブページの立ち上げ — モバイルファーストのプリセットは、多くのレイアウトに必要なタグを余計な要素なしに出力します。
• ノッチ付き端末への対応 — viewport-fit=cover と CSS のセーフエリア用パディングで、内容が切り欠きに隠れません。
• ズーム不具合の切り分け — ピンチで拡大できないという報告が来たら、タグに user-scalable=no や maximum-scale=1 がないか確認します。
• 設定の差分比較 — プリセットを行き来すれば、content 文字列のどの要素が変わるかが一目で分かります。

よくある質問

Q: ズームを禁止してもよい場合はありますか？ A: ほとんどありません。WCAG 1.4.4 はテキストを 200% まで拡大できることを求めており、ピンチ拡大は多くの人にとって小さな文字を読む唯一の手段です。地図など特定のウィジェットに理由がある場合を除き、user-scalable は書かないでください。

Q: CSS がレスポンシブなら、このタグは不要では？ A: 必要です。タグがないとモバイルブラウザは約 980 px のデスクトップ幅で描画してから全体を縮小するため、メディアクエリが実際の端末幅に一致しません。

Q: viewport-fit=cover は何をしますか？ A: 丸みを帯びた角や切り欠きの領域の下までページを描画できるようにします。その後、操作要素に届くよう CSS で env(safe-area-inset-*) のパディングを足してください。