この記事の目次
meta viewportとは
<meta name="viewport"> は、モバイルブラウザに「ページの表示幅をどう扱うか」を伝える meta 要素です。レスポンシブデザインでは、<head> に次の1行を入れるのが出発点になります。
<meta name="viewport" content="width=device-width, initial-scale=1">
これが無いと、多くのスマホブラウザはデスクトップ向けの広い仮想画面（レイアウトビューポート）でページを描画し、縮小して見せます。結果として、CSSのメディアクエリ（max-width: 600px など）がスマホで効かない、文字が小さい、といった症状になります。
基本（構文・仕組み）
content 属性にはカンマ区切りで指定します。MDN に載っている主な値は次のとおりです。
| 値 | 意味 | 備考 |
|---|---|---|
| width | レイアウトビューポートの幅 | device-width または 1〜10000 の数値 |
| height | 同じく高さ | 通常は指定しない |
| initial-scale | 読み込み時の拡大率 | 1 で等倍。0〜10 |
| minimum-scale / maximum-scale | 拡大率の下限 / 上限 | 0〜10 |
| user-scalable | ユーザーによる拡大縮小の可否 | 使わない（後述） |
| viewport-fit | ノッチ（切り欠き）領域の扱い | cover など |
| interactive-widget | 仮想キーボード表示時の挙動 | 下表 |
interactive-widget の値は次の3つです。
| 値 | 挙動 |
|---|---|
| resizes-visual（既定） | キーボードは見える範囲だけを縮め、レイアウトは動かない |
| resizes-content | レイアウトビューポートも縮み、ページが再配置される |
| overlays-content | キーボードがコンテンツの上に重なる |
width=device-width を指定すると、vw 単位やメディアクエリの基準が端末の画面幅に揃います。MDN は initial-scale=1 について、省略されることが多く通常は不要としつつ、省略するとはみ出した内容があるときにブラウザが縮小表示することがあるため、最初から等倍で表示したい場合は付けるよう説明しています。実務では併記されることが多い値です。
サンプルコード（実行結果つき）
推奨の基本形です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
</head>
フォームの入力時にキーボードで固定フッターが隠れる問題を避けたい場合の例です。
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
悪い例です。拡大ができなくなり、視力の弱い利用者が読めません。
<!-- 悪い例 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
動作確認（検証環境と結果）
- 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（
render.ps1）。 - 確認内容: viewport 有り・無しの2つのHTMLを
-Width 390で描画し、innerWidthを取得。 - 結果: どちらも
innerWidthは約500px前後（504 / 496）で、差は出ませんでした。headless ブラウザは最小ウィンドウ幅の都合で幅が揃い、モバイル端末の「仮想の広い画面」を再現しないためです。 - 結論: meta viewport の有無による実機スマホでの表示差は、この環境では未検証です。上の説明は MDN の記載に基づきます。実機またはDevToolsのデバイスモードで確認してください。
- ログ:
C:Tempks2techtestsmeta-viewport.md。
meta viewportの注意点
user-scalable=noやmaximum-scale=1は拡大を妨げます。MDN は WCAG の観点から避けるよう警告しており、少なくとも2倍、できれば5倍までの拡大を許すことが望ましいとしています。なお MDN によると、iOS 10 以降の Safari は既定でこの拡大禁止の指定を無視します。- CSSの
@viewportは使われません。幅の制御はmetaとCSSのレイアウトで行います。 - iOSの Safari は、入力欄のフォントサイズが小さいと自動ズームすることがあります。対策は拡大禁止ではなく、入力欄のフォントサイズを十分な大きさにすることです（私見を含みます）。
width=1024のような固定値は、画面ごとの最適化に反します。
meta viewportでよくあるミス
width=device-widthをwith=device-widthのように綴り間違える。contentの区切りをセミコロンにしてしまう（カンマが標準）。<body>内に書いて無効になる。<head>に置きます。- 画像が親幅を超えてはみ出る（
img { max-width: 100%; height: auto; }で対処）。 - レスポンシブ画像を
srcsetで指定していないため、スマホでも大きな画像を読み込む（picture と srcset を参照）。
ブラウザ対応・バージョン
width=device-width, initial-scale=1 は主要なモバイルブラウザで広く使えます。interactive-widget と viewport-fit は比較的新しい値で、対応の状況はブラウザ・バージョンで異なるため、導入前に MDN の互換性表で最新を確認してください。
meta viewportのチェックリスト
- [ ]
<head>内にwidth=device-width, initial-scale=1がある。 - [ ]
user-scalable=noとmaximum-scale=1を使っていない。 - [ ] 実機かデバイスモードで、横スクロールが出ないか確認した。
- [ ] 入力欄のフォントサイズが小さすぎない。
- [ ] 画像に
max-width: 100%を指定している。
meta viewportのFAQ（よくある質問）
Q. PCだけのサイトでも必要ですか。
A. PCのみでも書いて問題ありませんが、スマホから見られる可能性があるなら入れるのが前提です。
Q. initial-scale は必須ですか。
A. 省略してもブラウザが決めますが、1 を明示するのが一般的です。
Q. 拡大を禁止したいデザイン要件があるときは。
A. アクセシビリティの観点で避けるべきで、禁止ではなくレイアウトを崩れにくくする設計で対応します。
筆者の見解（meta viewport）
meta viewport は、width=device-width, initial-scale=1 の1行をテンプレートに固定し、それ以外は足さない方針が安全だと考えます。ズーム禁止は一見デザインが安定しますが、読めない利用者を生む副作用のほうが大きいと私は考えます。キーボードの重なりなど個別の問題は、interactive-widget やCSSで解決できないかを先に検討します。
