viewport（ビューポート）とは、ブラウザがWebページを表示するために使う領域のことで、ビューポートサイズはその幅と高さをCSSピクセルで表したものです。通常は端末の画面解像度よりずっと小さくなります。たとえば画面が1206 × 2622ピクセルのiPhoneでは、1つのCSSピクセルを縦横それぞれ3つの物理ピクセルで描くため、ビューポートは402 × 874 CSSピクセルです。レスポンシブなCSSやメディアクエリ、レイアウトに関する判断のほとんどは、画面解像度ではなくビューポートサイズを基準にしています。
ビューポートサイズと画面解像度の違い
スマホの画面は3つの数値で表され、混同しがちです。
| 用語 | 例（iPhone 17） | 意味 |
|---|---|---|
| 画面解像度 | 1206 × 2622 px | パネルの物理ピクセル数 |
| デバイスピクセル比（DPR） | 3 | 1 CSSピクセルあたりの物理ピクセル数（縦横それぞれ） |
| ビューポートサイズ | 402 × 874 CSS px | 解像度をDPRで割った値。CSSが認識するサイズ |
PCではDPRが1のことが多く（1920 × 1080のモニターを拡大率100%で使うと、スクロールバーを除いて幅1920 pxのビューポートになります）、高密度ディスプレイのノートPCでは2になります。ブラウザのズームでもDPRは変わり、200%に拡大するとCSSピクセルでのビューポート幅は半分になります。
機種ごとの数値はiPhoneの画面サイズとビューポート一覧にまとめています。
ビューポートサイズの確認方法
ブラウザのコンソールで確認する
デベロッパーツール（F12 または Cmd + Option + I）を開き、Consoleタブで次を実行します。
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth は縦スクロールバーの幅を含みます。document.documentElement.clientWidth はスクロールバーを含まず、CSSのパーセント指定や 100% の幅が基準にする値に近くなります。
デベロッパーツールのデバイスモードで確認する
デバイスツールバーには、エミュレートしているビューポートのサイズがページ上部に表示されます。Responsive モードでは、端をドラッグするか数値を入力して任意のサイズにできます。詳しくはChromeのモバイルエミュレーターの使い方をご覧ください。
スマホで確認する
「what is my viewport」のようなサイトを開くか、innerWidth と devicePixelRatio を表示する簡単なスクリプトを入れたページを読み込みます。結果は画面の向きやブラウザのツールバーの状態によって変わります。
レイアウトビューポートとビジュアルビューポート
モバイルブラウザには、実は2つのビューポートがあります。
- レイアウトビューポートは、CSSがページをレイアウトする領域です。viewportのmetaタグが正しく設定されていれば、その幅はCSSピクセルでの端末の幅と同じになります。
- ビジュアルビューポートは、いま画面に見えている部分です。ユーザーがピンチで拡大したときや、画面キーボードが開いたときに小さくなります。
position: fixed の要素はレイアウトビューポートを基準に配置されます。固定フッターがキーボードの裏に隠れてしまうのはこのためです。JavaScriptでは window.visualViewport.width と .height でビジュアルビューポートのサイズを取得でき、その resize イベントも監視できます。
スマホでビューポートの高さが変わり続ける理由
スマホではスクロールに合わせてアドレスバーやツールバーが折りたたまれるので、見えている高さが変わります。従来の 100vh は取りうる最大の高さを使うため、画面いっぱいのセクションの下端が切れてしまうことがよくありました。現在のCSSには、それぞれの状況に対応した単位があります。
| 単位 | 意味 |
|---|---|
svh |
小さいビューポートの高さ。ツールバーがすべて表示された状態 |
lvh |
大きいビューポートの高さ。ツールバーがすべて隠れた状態 |
dvh |
動的なビューポートの高さ。ツールバーの動きに合わせて変わる |
vh |
最近のモバイルブラウザでは lvh と同じ |
ページを開いた時点で画面に収めたいファーストビューには、min-height: 100svh がたいてい最も安全です。幅についても svw、lvw、dvw が用意されています。
よくあるビューポートサイズ
| 端末の種類 | 一般的なビューポート幅（縦向き） |
|---|---|
| 小型スマホ | 320〜375 px |
| 最近のiPhone | 375〜440 px |
| Androidスマホ | 360〜412 px |
| タブレット | 744〜1032 px |
| ノートPC | 1280〜1536 px |
| デスクトップモニター | 1440〜2560 px |
これだけ幅に差があるので、レスポンシブなレイアウトは特定のサイズに合わせるのではなく、ブレイクポイントの間でなめらかに伸縮するように作ります。
さまざまなビューポートサイズで確認する方法
PCでウィンドウの大きさを変えればビューポート幅も変わりますが、PCのブラウザはたいてい500 px前後までしか狭くできず、DPRも1か2のままです。正しいサイズとピクセル比でスマホのビューポートを確認するには、デベロッパーツールのデバイスモードか、Mobile View Extensionのようなスマホ表示用の拡張機能を使います。端末の画面サイズ、ピクセル比、ユーザーエージェントを適用でき、任意の解像度も入力できます。全体の手順はレスポンシブデザインの確認方法で解説しています。
よくある質問
自分のビューポートサイズを知るには？
ブラウザのコンソールで window.innerWidth と window.innerHeight を実行します。スマホではこれらの値を表示するページを開きます。結果は画面の向きによって変わります。
ビューポートサイズと画面解像度は同じですか？
違います。ビューポートサイズはCSSピクセル、画面解像度は物理ピクセルで表します。解像度をデバイスピクセル比で割ると、ビューポートサイズになります。
どのビューポートサイズに合わせてデザインすればいいですか？
320 px以上で崩れない可変レイアウトにしましょう。そのうえで、スマホで一般的な360、390〜402、430〜440 px、タブレットの768〜834 px前後、PCの1280〜1440 px前後で確認します。