ビューポートメタタグジェネレーターとは
ビューポートメタタグジェネレーターは、ビューポートメタタグ、theme-color、Apple touch iconリンクをまとめて生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Use the viewport meta tag to control how your page scales on mobile devices. The standard value width=device-width with initial-scale=1 works for nearly every responsive site and ensures readable text without requiring zoom gestures.
Limitations
- theme-color only affects the browser chrome on supported mobile browsers. Desktop browsers and some browser configurations ignore it entirely.
- Apple touch icon tags require an actual PNG image file at the specified path. A missing or incorrect path produces a broken icon silently on iOS.
- The viewport tag controls initial scale but does not make a non-responsive layout usable on mobile. It must be paired with a responsive design using CSS media queries.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。