IT用語集 › Web › viewport メタタグ

viewport メタタグ

Web Svenska → 更新: 2026-10-23

モバイルブラウザがコンテンツをどう拡大縮小するかを制御するHTMLのmetaタグ。<meta name="viewport" content="width=device-width, initial-scale=1">と書く。

レスポンシブデザインには必須で、これがないとSafariはデスクトップ向けの幅に縮小して描画する。概念は2007年のiPhoneでAppleが導入した。モバイルの既定のビューポートは約980pxで、デスクトップ表示をそのまま縮めた状態になる。width=device-widthを指定するとデバイスのピクセル幅に一致し、CSSのメディアクエリが期待どおりに働く。maximum-scale=1, user-scalable=noはピンチズームを壊すアクセシビリティ上のアンチパターンだ。ノッチ付きディスプレイ(iPhone X以降)にはviewport-fit=coverとsafe-area-insetのCSSを使う。Google Lighthouseやレスポンシブ確認ツールもこのタグの有無を検査する。

← 用語集に戻る