viewport メタタグ
モバイルブラウザがコンテンツをどう拡大縮小するかを制御する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やレスポンシブ確認ツールもこのタグの有無を検査する。