2025.08.06 Webサイト

viewportの書き方とパラメータ一覧｜user-scalable=noの注意点まで

meta viewportタグは、スマートフォンでWebページを正しい幅・倍率で表示させるための1行です。書き方はwidth=device-width, initial-scale=1が基本で、ここにuser-scalable=noやmaximum-scaleを足すとズームを制限できる——とされてきました。ところがこの「ズーム禁止」はiOS10以降のSafariでは効かず、アクセシビリティ基準にも反します。この記事では各パラメータの意味と書き方を一覧で整理し、user-scalable=noを使うべきでない理由、ノッチ端末向けのviewport-fitなど新しい指定までをまとめます。

1 まとめ｜結論はwidth=device-width, initial-scale=1の1行
2 viewport（ビューポート）とは｜ブラウザの表示領域
- 2.1 CSSピクセルと物理解像度・DPRの違い
- 2.2 スマホ・タブレットの代表的なビューポート幅
3 meta viewportタグの書き方と記述場所
4 viewportで指定できるパラメータ一覧
5 user-scalable=noでズームは禁止できない｜iOSの挙動とWCAG
6 viewportとレスポンシブデザイン・メディアクエリの関係
7 viewport設定とSEO・モバイルフレンドリーの実情
8 viewport設定でよくあるミスと対処
9 よくある質問
10 関連記事

まとめ｜結論はwidth=device-width, initial-scale=1の1行

迷ったら次の1行で十分です。<meta name="viewport" content="width=device-width, initial-scale=1">。これでデバイス幅に合わせて等倍表示され、レスポンシブデザインの前提が整います。user-scalable=noやmaximum-scale=1でのズーム禁止は付け足さないのが現在の推奨です。iOS10以降のSafariは無視するため意図どおりに動かず、WCAG（アクセシビリティ指針）の文字拡大要件にも反するためです。各パラメータの詳細と、ノッチ端末・仮想キーボードに対応する新しい指定は本文で扱います。

用途	記述例
標準（推奨）	width=device-width, initial-scale=1
ノッチ端末対応	…, viewport-fit=cover
ズーム禁止	非推奨（iOSで無効・WCAG不適合）

viewport（ビューポート）とは｜ブラウザの表示領域

viewport（ビューポート）とは、ブラウザがWebページを描画する表示領域を指します。物理的な画面サイズそのものではなく、ブラウザが内部で扱う「CSSピクセル」での領域です。meta viewportタグを置かないと、多くのモバイルブラウザは幅980pxのPC向けページと見なして全体を縮小表示し、文字が小さく読みにくくなります。タグで表示領域をデバイス幅に合わせることで、この縮小を防ぎます。

CSSピクセルと物理解像度・DPRの違い

表示の基準になるのはCSSピクセルで、物理解像度とは一致しません。両者の比率がDPR（Device Pixel Ratio、デバイスピクセル比）です。たとえば物理解像度1179×2556のiPhone 15でも、CSS上の横幅は393pxとして扱われ、DPRは3です。レイアウトはこのCSSピクセルで設計し、画像だけ高解像度（2倍・3倍）を用意するのが基本です。物理解像度の数値をそのまま幅に使うと、高精細スマホで極端に小さい表示になります。

スマホ・タブレットの代表的なビューポート幅

主要端末のCSSピクセル幅（縦持ち）の目安は次のとおりです。機種で変わるため、厳密値は各メーカーの公式仕様で確認してください。

デバイス	幅(CSSピクセル)	DPR
iPhone SE 第3世代	375px	2
iPhone 15 / 16	393px	3
iPhone 16 Plus	430px	3
iPad（10.9インチ）	820px	2

このようにスマホは概ね375〜430px、タブレットは768〜834pxに収まります。メディアクエリのブレークポイントは、この実幅を踏まえて決めると過不足が出にくくなります。

meta viewportタグの書き方と記述場所

viewportはHTMLのhead要素内に、1つだけ記述します。値はカンマ区切りで複数の属性を並べます。標準的な書き方は次の1行です。

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-widthで表示幅をデバイス幅に合わせ、initial-scale=1で初期倍率を等倍にします。記述場所はhead内の早い位置が安全です。ブラウザは先に読んだ情報でレンダリングを始めるため、titleや他のmetaより前に置くと初期表示が安定します。<!DOCTYPE html>の宣言が無いと互換モードになり、viewportが意図どおり反映されないことがあります。viewportを複数行書くと挙動が不定になるので、必ず1つに統一します。

viewportで指定できるパラメータ一覧

contentに指定できる主なパラメータは次の8つです。実務で常用するのは上の3〜4個で、残りは用途が限られます。

パラメータ	主な値	役割
width	device-width	表示幅の基準
initial-scale	1	初期ズーム倍率
minimum-scale	数値	最小ズーム倍率
maximum-scale	数値	最大ズーム倍率
user-scalable	yes / no	ズームの可否
viewport-fit	cover 他	ノッチ端末の表示制御
interactive-widget	3値	仮想キーボード時の挙動
height	device-height	表示高さ（ほぼ未使用）

width属性とdevice-widthの意味

widthは表示領域の横幅を決めます。width=device-widthはデバイスの実際の画面幅（CSSピクセル）に合わせる指定で、現在の標準です。width=980のような固定値も書けますが、スマホでは横スクロールが発生してUXを損なうため、特別な理由がなければ使いません。高さはコンテンツ量で決まるため、heightを指定する場面はほぼ無く、widthだけで足ります。

initial-scale・minimum-scale・maximum-scaleの役割

スケール系の3属性はズーム倍率を制御します。initial-scale=1は初期表示を等倍にする指定で、ここを誤って2などにするとページが拡大表示されます。minimum-scaleとmaximum-scaleはユーザーが操作できる倍率の下限・上限で、既定では下限0.25・上限はブラウザ既定（iOSなどでは無視）です。ただしmaximum-scaleを小さく絞るとズームできなくなり、WCAGが求める拡大率200%を確保できないため不適合になります。maximum-scale=2未満の指定は避け、原則としてスケールの上限は付けません。

user-scalable属性でズームの可否を指定する

user-scalableはピンチ操作での拡大縮小を許可するかどうかの指定です。user-scalable=yes（省略時の既定）なら自由にズームでき、user-scalable=noでズームを禁止する——というのが本来の仕様です。ゲームや地図UIなど固定表示が要るアプリで使われてきましたが、後述のとおり主要ブラウザの挙動とアクセシビリティの両面から、現在は推奨されません。

viewport-fitとinteractive-widget（新しいパラメータ）

近年追加された2つは、旧来の解説記事ではほぼ触れられていません。viewport-fit=coverは、iPhoneのノッチやホームバーがある端末で表示領域を画面いっぱいに広げる指定です。広げた分コンテンツが切り欠きに隠れないよう、CSS側でenv(safe-area-inset-top)などのセーフエリア変数を併用します。interactive-widgetは仮想キーボードが出たときのビューポートの扱いを制御し、値はresizes-visual（既定）・resizes-content・overlays-contentの3つです。入力フォーム中心の画面でキーボード表示時のレイアウト崩れを抑えたいときに使います。

user-scalable=noでズームは禁止できない｜iOSの挙動とWCAG

結論から言うと、user-scalable=noによるズーム禁止は現在のスマホでは当てにできません。AppleはiOS10（2016年）以降、Safariでuser-scalable=noとmaximum-scaleを意図的に無視し、ピンチズームを常に許可する仕様にしました。低視力のユーザーが拡大して読めるようにするためのアクセシビリティ上の判断です。つまりiPhoneでは、ズーム禁止を書いても効きません。一部の古いAndroidブラウザは従いますが、それを前提に設計する意味は薄れています。

仕様面でも、ズーム禁止はWCAG 1.4.4「テキストの拡大縮小」（文字を200%まで拡大できること）に反します。さらに500%まで拡大できる設計が、低視力ユーザーへの配慮としてベストプラクティスに挙げられています。W3CのACTルールでも「meta viewportはズームを許可していること」が達成基準として明示されています。情報提供サイトや公共・医療・教育系では、ズーム禁止は採用しないのが妥当です。

どうしてもピンチズームを抑えたい特殊なケース（ネイティブ風の業務用Webアプリなど）では、viewportではなくCSSのtouch-action: manipulationやJavaScriptでダブルタップ拡大だけを抑える方法があります。それでも、文字の拡大手段を完全に奪う設計は避け、別の拡大手段を残すべきです。新規実装では、user-scalable=noもmaximum-scaleも書かないのが基本方針になります。

viewportとレスポンシブデザイン・メディアクエリの関係

viewportはレスポンシブデザインの前提です。CSSのメディアクエリ（例：@media (max-width: 768px)）は、ビューポート幅を条件に判定します。viewportを設定していないと、スマホでも幅980pxと認識され、max-width: 768pxの条件が成立せずスタイルが当たりません。「メディアクエリが効かない」原因の多くがviewport未設定です。width=device-widthを置いて初めて、画面幅に応じたレイアウト切り替えが機能します。要素単位で出し分ける新しい手法については、CSS Container Queriesで実現するコンポーネント単位のレスポンシブ設計も参考になります。

viewport設定とSEO・モバイルフレンドリーの実情

viewportはモバイル対応の土台であり、SEOにも関わります。ただし運用面は近年変わりました。Googleは2023年12月1日に、モバイルフレンドリーテストツール、サーチコンソールのモバイルユーザビリティレポート、関連APIの提供を終了しました。モバイル対応がランキングアルゴリズムに組み込まれ定着したためで、モバイル対応が不要になったわけではありません。現在は専用テストの代わりにPageSpeed InsightsやLighthouseで確認します。古い解説にある「サーチコンソールのモバイルユーザビリティ警告で確認する」手順は、今は使えません。

表示の安定性という観点では、viewport未設定だと縮小処理やレイアウトのずれが起き、Core Web Vitalsのスコア（特にCLS）に間接的な悪影響が出ます。指標の詳細はCore Web Vitalsとは何か？Webページパフォーマンスの重要指標の解説で扱っています。スマホ向けの順位対策全体は検索順位を上げるためのスマートフォンサイトにおけるSEO対策手法にまとめています。

viewport設定でよくあるミスと対処

実装でつまずきやすいのは次のパターンです。いずれも初期段階で防げます。

width=980など固定幅の指定：スマホで横スクロールが発生。device-widthに直す。
user-scalable=no / maximum-scale=1でのズーム禁止：iOSで無効かつWCAG不適合。書かない。
viewportを複数行記述：挙動が不定になる。head内に1つへ統一。
initial-scaleの誤値：2などで拡大表示。等倍は1。
ノッチ端末でviewport-fit未指定：切り欠きにコンテンツが隠れる。coverとセーフエリアを併用。

変更後は実機で必ず確認します。エミュレータでは再現しない表示崩れが、機種ごとの画面密度やブラウザ差で出ることがあります。

よくある質問

user-scalable=noはなぜ効かないのですか？

iOS10以降のSafariが、アクセシビリティ確保のためuser-scalable=noとmaximum-scaleを無視し、ピンチズームを常に許可する仕様にしたためです。iPhoneではズーム禁止を書いても拡大できます。一部の古いAndroidブラウザは従いますが、現在の主要環境では当てにできません。ズームを抑える必要がある場合もviewportでは制御せず、CSSのtouch-actionなどで限定的に対応します。

ビューポートの幅はいくつにすればよいですか？

固定の数値は指定せず、width=device-widthでデバイス幅に合わせるのが基本です。実際のCSSピクセル幅はiPhoneで概ね375〜430px、タブレットで768〜834pxですが、機種で変わるため固定値での設計は避けます。device-widthにしておけば、どの幅でもブラウザが自動でビューポート幅を判断します。

maximum-scaleとは何ですか？

ユーザーがズームできる最大倍率の上限を決める属性です。たとえばmaximum-scale=2なら2倍までしか拡大できません。ただし上限を小さく絞ると拡大率200%（WCAGの要件）を確保できず不適合になり、iOSでは無視されます。原則として上限は指定しないのが安全です。

width=device-width, initial-scale=1の意味は？

width=device-widthは表示幅をデバイスの画面幅（CSSピクセル）に合わせる指定、initial-scale=1は初期のズーム倍率を等倍にする指定です。この2つの組み合わせで、スマホでも縮小されず読みやすい等倍表示になり、メディアクエリも正しく機能します。現在の標準的な書き方です。

viewportでページを縮小するにはどうすればよいですか？

initial-scaleを1未満（例：0.8）にすると初期表示を縮小できますが、文字が小さく読みづらくなるため推奨しません。ページ全体が画面に収まらない場合は、固定幅レイアウトをやめてdevice-widthとレスポンシブCSSで作り直すのが本筋です。縮小指定は応急処置にとどめます。

資料請求