--- title: "viewportの書き方とパラメータ一覧｜user-scalable=noの注意点まで" url: "https://www.issoh.co.jp/column/details/8054/" published: 2025-08-06 updated: 2026-10-01 categories: ["Webサイト"] publisher: "株式会社一創" --- # 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など新しい指定までをまとめます。 ## まとめ｜結論はwidth=device-width, initial-scale=1の1行 迷ったら次の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行です。 ``` ``` `width=device-width`で表示幅をデバイス幅に合わせ、`initial-scale=1`で初期倍率を等倍にします。記述場所はhead内の早い位置が安全です。ブラウザは先に読んだ情報でレンダリングを始めるため、`title`や他のmetaより前に置くと初期表示が安定します。``の宣言が無いと互換モードになり、viewportが意図どおり反映されないことがあります。viewportを複数行書くと挙動が不定になるので、必ず1つに統一します。 ## viewportで指定できるパラメータ一覧 contentに指定できる主なパラメータは次の8つです。実務で常用するのは上の3〜4個で、残りは用途が限られます。 | パラメータ | 主な値 | 役割 | | ------------------ | ---------------------- | ----------- | | width | device-width | 表示幅の基準 | | initial-scale | 1 | 初期ズーム倍率 | | minimum-scale | 数値 | 最小ズーム倍率 | | maximum-scale | 数値 | 最大ズーム倍率 | | user-scalable | yes / no | ズームの可否 | | viewport-fit | auto / contain / 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はユーザーが操作できる倍率の下限・上限で、MDNの仕様上はどちらも0.0〜10.0の数値を取ります。ただしiOS10以降のSafariは両方とも既定で無視するため、書いても効かない環境がある点は先に押さえてください。maximum-scaleを小さく絞るとズームできなくなり、WCAG 2.2の達成基準1.4.4が求める拡大率200%を確保できません。W3CのACTルール「Meta viewport allows for zoom」も、maximum-scaleが未指定か2以上であることを合格条件に置いています。`maximum-scale=2`未満の指定は避け、原則としてスケールの上限は付けません。 ### user-scalable属性でズームの可否を指定する user-scalableはピンチ操作での拡大縮小を許可するかどうかの指定です。`user-scalable=yes`（省略時の既定）なら自由にズームでき、`user-scalable=no`でズームを禁止する——というのが本来の仕様です。ゲームや地図UIなど固定表示が要るアプリで使われてきましたが、後述のとおり主要ブラウザの挙動とアクセシビリティの両面から、現在は推奨されません。 ### viewport-fitとinteractive-widget（新しいパラメータ） 近年追加された2つは、旧来の解説記事ではほぼ触れられていません。`viewport-fit`はauto・contain・coverの3値を取り、autoは初期レイアウトに影響せず（既定）、containは画面内に収まる最大の矩形に表示を収めます。実務で使うのは`viewport-fit=cover`で、iPhoneのノッチやホームバーがある端末で表示領域を画面いっぱいに広げる指定です。広げた分コンテンツが切り欠きに隠れないよう、CSS側で`env(safe-area-inset-top)`などのセーフエリア変数を併用します。`interactive-widget`は仮想キーボードが出たときのビューポートの扱いを制御し、値はresizes-visual（既定）・resizes-content・overlays-contentの3つです。入力フォーム中心の画面でキーボード表示時のレイアウト崩れを抑えたいときに使います。 実際の記述は次のようになります。viewport-fitはmetaだけでは足りず、CSSのセーフエリア変数とセットで書きます。 ``` /* CSS: 切り欠き・ホームバーの領域を避ける */ .site-header { padding-top: env(safe-area-inset-top, 0px); } .site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); } ``` 仮想キーボードでレイアウトを押し上げたくないフォーム画面では、次のように指定します。 ``` ``` 両方が必要な場合もmetaタグは増やさず、1つのcontent属性にカンマ区切りでまとめます（`content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=overlays-content"`）。 ## user-scalable=noでズームは禁止できない｜iOSの挙動とWCAG 結論から言うと、user-scalable=noによるズーム禁止は現在のスマホでは当てにできません。AppleはiOS10（2016年）以降、Safariでuser-scalable=noとmaximum-scaleを意図的に無視し、ピンチズームを常に許可する仕様にしました。低視力のユーザーが拡大して読めるようにするためのアクセシビリティ上の判断です。つまりiPhoneでは、ズーム禁止を書いても効きません。一部の古いAndroidブラウザは従いますが、それを前提に設計する意味は薄れています。 仕様面でも、ズーム禁止はWCAG 2.2の達成基準1.4.4「テキストのサイズ変更」（レベルAA・支援技術なしで文字を200%まで拡大できること）に反します。隣接する達成基準1.4.10「リフロー」は、320CSSピクセル幅（デスクトップの1280px幅を400%ズームした状態に相当）で二方向スクロールなしに読めることを求めますが、モバイルでピンチズームを封じると利用者はその拡大操作自体を行えません。W3CのACTルール「Meta viewport allows for zoom」は達成基準1.4.4に紐づき、user-scalableに`no`を指定していないことを合格条件としています。情報提供サイトや公共・医療・教育系では、ズーム禁止は採用しないのが妥当です。 どうしてもピンチズームを抑えたい特殊なケース（ネイティブ風の業務用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を置いて初めて、画面幅に応じたレイアウト切り替えが機能します。レスポンシブデザイン全体の仕組み・メリットと方式の選び方は[レスポンシブデザインとは？仕組み・メリットとスマホ対応方式の選び方](/column/details/15308/)にまとめています。メディアクエリの記法とブレークポイント設計の実装手順は[レスポンシブデザインの作り方｜メディアクエリとブレークポイント設計の実装手順](/tech/details/15329/)で扱っています。要素単位で出し分ける新しい手法については、[コンテナクエリを理解するための基礎知識と重要ポイント](/tech/details/4708/)も参考になります。 ## viewport設定とSEO・モバイルフレンドリーの実情 viewportはモバイル対応の土台であり、SEOにも関わります。ただし運用面は近年変わりました。Googleは2023年12月1日に、モバイルフレンドリーテストツール、サーチコンソールのモバイルユーザビリティレポート、関連APIの提供を終了しました。モバイル対応がランキングアルゴリズムに組み込まれ定着したためで、モバイル対応が不要になったわけではありません。現在は専用テストの代わりにPageSpeed InsightsやLighthouseで確認します。古い解説にある「サーチコンソールのモバイルユーザビリティ警告で確認する」手順は、今は使えません。 表示の安定性という観点では、viewport未設定だと縮小処理やレイアウトのずれが起き、Core Web Vitalsのスコア（特にCLS）に間接的な悪影響が出ます。指標の詳細は[コアウェブバイタルとは？3指標（LCP・INP・CLS）の基準と改善方法【2026年版】](/column/details/4624/)で扱っています。スマホ向けの順位対策全体は[検索順位を上げるためのスマートフォンサイトにおけるSEO対策手法](/column/details/7506/)にまとめています。 ## 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達成基準1.4.4の要件）を確保できず不適合になり、iOS10以降のSafariでは既定で無視されます。原則として上限は指定しないのが安全です。 ### width=device-width, initial-scale=1の意味は？ width=device-widthは表示幅をデバイスの画面幅（CSSピクセル）に合わせる指定、initial-scale=1は初期のズーム倍率を等倍にする指定です。この2つの組み合わせで、スマホでも縮小されず読みやすい等倍表示になり、メディアクエリも正しく機能します。現在の標準的な書き方です。 ### viewportでページを縮小するにはどうすればよいですか？ initial-scaleを1未満（例：0.8）にすると初期表示を縮小できますが、文字が小さく読みづらくなるため推奨しません。ページ全体が画面に収まらない場合は、固定幅レイアウトをやめてdevice-widthとレスポンシブCSSで作り直すのが本筋です。縮小指定は応急処置にとどめます。 ## 関連記事 - [検索順位を上げるためのスマートフォンサイトにおけるSEO対策手法](/column/details/7506/) - [Webパフォーマンス指標の一覧と使い分け｜TTFB・FCP・TBT・Speed Indexの基準](/column/details/3761/) - [コンテナクエリを理解するための基礎知識と重要ポイント](/tech/details/4708/) --- 出典: [viewportの書き方とパラメータ一覧｜user-scalable=noの注意点まで]()（株式会社一創）