#1画面サイズ・解像度
画面解像度とビューポートサイズの違い
画面解像度 は OS が認識しているディスプレイ全体のピクセル数（CSS px）で、ビューポートサイズ は実際にブラウザが Webページを描画している領域のサイズです。 ブラウザのアドレスバー・ブックマークバー・拡張機能パネル・タスクバー等の UI 要素を除いた「コンテンツが表示される矩形」がビューポートになります。 ウィンドウを最大化していても、解像度より少し小さいビューポートになるのはこのためです。
DPR（デバイスピクセル比）
DPR は 1 CSS px が物理ピクセル何個に対応するか を示す値です。 一般的なフルHDモニター（DPR=1）では「CSS の 1px が画面の 1 物理ピクセル」ですが、 高精細ディスプレイ（DPR=2 や 3）では「CSS の 1px が 2x2 や 3x3 の物理ピクセルで描画」されます。 これにより、文字や画像のジャギ（ギザギザ）が目立たず滑らかに見えます。 iPhone・Macの Retina ディスプレイ、Windows の高DPI設定、4Kノートパソコンなどが DPR≥2 になりやすい代表例です。
物理ピクセル数の計算方法
物理ピクセル = CSS解像度 × DPR で求められます。 例えば 1920×1080 の CSS 解像度で DPR が 2 なら、物理ピクセルは 3840×2160（いわゆる 4K 相当）。 CSS 解像度 1440×900 で DPR 2 なら、物理は 2880×1800。 画像を用意する Web デザイナーは、この物理ピクセル数を意識して@2x / @3x 画像や srcset 属性で高解像度版を提供します。
Webデザイン・レスポンシブでの活用
CSS の @media (min-width: 768px) のようなブレイクポイントは ビューポート幅（CSS px） を見ています。 物理ピクセル数ではないので、Retinaの iPad（物理 2048px）でもビューポートは 768〜1024px として扱われ、 適切なレイアウトが選択されます。 一方、画像のシャープさを保つには srcset や image-set() で物理ピクセルに合った画像を出し分けます。
モバイル端末特有の注意点
スマートフォンの場合、ホームバー・通知バー・ソフトウェアキーボード が表示されるとビューポート高さが変わるため、 CSS の 100vh がページ表示と一致しないことがあります。 iOS Safari ではこれが顕著で、近年は 100dvh（dynamic viewport height）を使うことで動的に追従するレイアウトを書くのが推奨されています。 本ツールでは現在のビューポート高さがリアルタイムで反映されるので、向き変更や下スワイプでの値の変動も確認できます。
画面サイズと解像度の違い
解像度は「画面に並んでいる点の数」、画面サイズは「実際の大きさ」を表します。この2つは別物で、同じ解像度でも画面が大きければ点は粗く、小さければ細かく見えます。
このツールでは、いま使っている画面の解像度や、ブラウザで実際に表示できる範囲の広さを確認できます。ウェブサイトを作っている人が表示を確認したいとき、動画の設定を決めたいときなどに役立ちます。
表示される項目の意味
画面解像度と表示領域の数字が違うのは正常です。ブラウザにはアドレスバーやタブが表示されており、そのぶんページに使える範囲は狭くなるためです。スマートフォンでは、この差がさらに大きくなります。
| 項目 | 意味 |
|---|---|
| 画面解像度 | 画面全体が持っている点の数 |
| 表示領域 | ブラウザで実際にページが表示される範囲 |
| 拡大率 | 画面の表示を何倍にしているか |
| 向き | 縦向きか横向きか |
文字が小さい・大きいと感じたら
- パソコンの表示設定で拡大率を変更する。125％や150％にすると読みやすくなります
- ブラウザだけを拡大する方法もあります。他のアプリの表示は変わりません
- 高解像度の画面ほど、初期設定のままだと文字が小さく感じられます
- 拡大するとページに表示できる情報量は減るため、使いやすさとのバランスで決めてください