カテゴリー: 開発ツール
ビューポートメタタグジェネレーター
レスポンシブなビューポートメタタグを生成し、各オプションを理解する
ページのビューポートメタタグについて、幅、初期スケール、ズーム範囲、ピンチズームの許可、viewport-fitを設定でき、各オプションの簡単な説明とともに、完成したタグを<head>にコピーできます。すべてブラウザ内でローカルに生成されます。
これをオフにするとピンチズームがブロックされ、アクセシビリティを損ないます。ほとんどのサイトはオンのままにすべきです。
メタタグ
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
ビューポートメタタグは、モバイルブラウザにページのサイズとスケールの決め方を伝えるものです。これがないと、スマートフォンはデスクトップ向けの固定幅でページを描画し縮小表示してしまうため、モバイルフレンドリー診断ツールが最初にチェックする項目の一つになっています。width=device-widthとinitial-scale=1を設定しておけば一般的なケースはカバーできますが、ズーム範囲やviewport-fitのオプションは、そのままコピーするのではなく理解しておく価値があります。ズームを完全に無効化することは、弱視のユーザーにとってアクセシビリティ上の問題になるためです。
使い方
- 特別な理由がない限り、幅は「device-width」のままにしておきます。
- 初期スケールを設定し、必要に応じて最小／最大のズーム範囲も設定します。
- ピンチズームを許可するかどうかを決めます。オンのままにしておくことを推奨します。
- デザイン上ノッチやセーフエリアの余白まで広げる必要がある場合は、viewport-fitの値を選びます。
- 生成されたタグをページの<head>にコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 「意図しない」ズームを防ぐためにuser-scalableを無効にすべきですか。
- 一般的には避けるべきです。ピンチズームをブロックすると、弱視の訪問者がコンテンツを読むために拡大できなくなり、アクセシビリティガイドライン（WCAG 1.4.4）で問題視されます。ズームを無効化するのではなく、レイアウトの問題を修正してください。
- viewport-fit=coverは実際に何をしますか。
- ノッチや角丸のあるデバイスでは、ページの背景を黒帯にする代わりにそのセーフエリアの余白まで広げられます。その一方でenv(safe-area-inset-*)のCSS関数を使えば、コンテンツ自体はノッチにかからないようにできます。
- width=device-widthは常に正しい設定ですか。
- レスポンシブサイトの大多数にとっては、はいと言えます。CSSのビューポートをデバイスの実際の幅に一致させることで、レスポンシブなブレークポイントが予測どおりに機能するようになります。