画面とウィンドウの詳細
特に記載がない限り、サイズはWebサイトが使う単位であるCSSピクセルで表示しています。正確な数値を見るには、ブラウザのズームを100%に戻してください(Ctrl+0、Macでは⌘0)。
- 画面解像度
- 確認中… Webサイトから見える画面サイズです。
- 物理解像度
- 確認中…画面解像度 × デバイスピクセル比。パネル上の実際のピクセル数です。
- ビューポート(ブラウザの表示領域)
- 確認中… ツールバーを除いた、ページが見えている部分です。
- ブラウザウィンドウ全体
- 確認中…
- 利用可能な画面領域
- 確認中…画面からタスクバー、Dock、メニューバーを除いた領域です。
- デバイスピクセル比
- 確認中…
- アスペクト比
- 確認中…
- 画面の向き
- 確認中…
- 色深度
- 確認中…
- 色域
- 確認中…
- HDR
- 確認中…
- リフレッシュレート
- 確認中…
- タッチスクリーン
- 確認中…
- モニター
- 確認中…
画面上のビューポートの位置
外側の枠が画面全体、網掛けの枠がこのページの見えている部分で、ブラウザのウィンドウがある位置です。
よく使われる画面解像度
モニターとノートパソコンは物理ピクセル、スマホとタブレットはWebサイトから見えるCSSピクセルで記載しています。あなたの画面と一致する行には印が付きます。
| 名称 | 解像度 | アスペクト比 | 主な用途 |
|---|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 | HDテレビ、小型ノートパソコン |
| WXGA | 1366 × 768 | 16:9 | 低価格ノートパソコン |
| HD+ | 1600 × 900 | 16:9 | 17インチノート、古いモニター |
| Full HD (1080p) | 1920 × 1080 | 16:9 | ほとんどのモニターとノートパソコン |
| WUXGA | 1920 × 1200 | 16:10 | オフィス用モニター、ノートパソコン |
| QHD / 2K (1440p) | 2560 × 1440 | 16:9 | 27インチモニター、ゲーム |
| WQXGA | 2560 × 1600 | 16:10 | MacBook Air・Pro、16:10のノートパソコン |
| UWQHD | 3440 × 1440 | 21:9 | 34インチウルトラワイドモニター |
| 4K UHD (2160p) | 3840 × 2160 | 16:9 | 4Kモニター・テレビ |
| 5K | 5120 × 2880 | 16:9 | iMac、Apple Studio Display |
| iPhone 12 / 13 / 14 | 390 × 844 | 19.5:9 | iPhone(CSSピクセル) |
| iPhone 15 / 16 | 393 × 852 | 19.5:9 | iPhone(CSSピクセル) |
| Android | 412 × 915 | 20:9 | Androidスマホ(CSSピクセル) |
| iPad | 810 × 1080 | 4:3 | iPad(CSSピクセル) |
画面解像度とは
画面解像度とは、ディスプレイが横と縦に表示するピクセル数のことで、「幅 × 高さ」で表します。フルHD(Full HD)のモニターは1920 × 1080、つまり横1,920ピクセル、縦1,080ピクセルで、合計約200万ピクセルです。
同じ画面サイズならピクセルが多いほど、文字や画像はくっきり表示されます。そのため、13インチのノートパソコンが24インチのオフィス用モニターより高解像度ということもあります。
解像度がモニターの仕様より低く表示される理由
Windows、macOS、iOS、Androidは、高精細な画面でも文字が読みやすいように表示全体を拡大しています。1920 × 1080のパネルで拡大率125%のノートパソコンは、Webサイトに画面を1536 × 864と伝えます。2560 × 1600のパネルを持つMacBookは、通常1440 × 900または1470 × 956と報告します。
Webサイトから見えるのは、この拡大後のサイズ(CSSピクセル)だけです。これにデバイスピクセル比を掛けると物理解像度になり、このページでは大きな数字の下に表示しています。ブラウザのズームでもピクセル比は変わるので、比べる前にズームを100%に戻してください。
画面解像度・ビューポート・ウィンドウサイズの違い
- 画面解像度:ディスプレイ全体のサイズ。ほかのウィンドウに隠れている部分も含みます。
- 利用可能な画面領域:ディスプレイからタスクバー、Dock、メニューバーを除いた部分。
- ブラウザウィンドウ:タブ、アドレスバー、枠を含むウィンドウ全体。
- ビューポート:ウィンドウの中でページが表示される部分。Webデザイナーがレイアウトを確認するときの基準となるサイズで、ウィンドウのサイズを変えたり開発者ツールを開いたりすると変わります。
画面解像度の変更方法
- Windows 11・10:デスクトップを右クリック > ディスプレイ設定 > ディスプレイの解像度。「(推奨)」と付いているのがモニター本来の解像度(ネイティブ解像度)です。拡大率の設定(拡大/縮小)はそのすぐ上にあります。
- macOS:アップルメニュー > システム設定 > ディスプレイ を開き、サイズを選びます。文字を大きくするほどCSSピクセルの数は減り、1つ1つが大きくなりますが、パネルの物理解像度は変わりません。
- iPhoneとAndroid:解像度は固定です。「拡大表示」(iPhone)や「表示サイズ」(Android)で変わるのは表示の大きさで、それに伴いWebサイトから見えるCSSサイズが変わります。
- いちばんくっきり表示させたいなら、解像度はネイティブのままにして、拡大率のほうを調整してください。
よくある質問
自分の画面の解像度はいくつですか?
このページの一番上に、ブラウザから読み取った値を表示しています。大きな数字がWebサイトから見えるサイズで、その下の行がディスプレイの物理解像度と、システムで設定されている拡大率です。
モニターは1920 × 1080なのに、1536 × 864と表示されるのはなぜ?
システムの拡大率が125%に設定されているため、Webサイトからは画面が1.25分の1の大きさに見えています。物理解像度は1920 × 1080のままで、大きな数字の下に表示されています。同様に、拡大率150%では1920 × 1080が1280 × 720になります。
1920 × 1080は1080pや2Kと同じですか?
1920 × 1080はフルHD(Full HD)で、1080pとも呼ばれます。モニターで2Kと言う場合はふつう2560 × 1440(QHD、1440p)を指しますが、映画業界の2Kは2048 × 1080です。4K UHDは3840 × 2160で、1080pの4倍のピクセル数です。
ビューポートのサイズとは?
ビューポートは、ブラウザウィンドウのうちタブ、アドレスバー、スクロールバーを除いた、ページが表示される領域です。レスポンシブなWebサイトはこのサイズに合わせてレイアウトを変えるので、デザイナーが「ブラウザサイズを確認して」と言うときは、たいていこのサイズのことです。
デバイスピクセル比とは?
1つのCSSピクセルを何個の物理ピクセルで表示しているかを示す値です。1なら拡大なし、RetinaディスプレイのMacや多くのスマホでは2、最近のiPhoneでは3が一般的です。ブラウザのズームでも変わります。
スマホの画面解像度を確認するには?
スマホでこのページを開いてください。スマホはCSSピクセルで報告するため、たとえばiPhone 15では393 × 852です。これにピクセル比(このiPhoneでは3)を掛けるとパネルの1179 × 2556ピクセルになり、このページではその計算も自動で行います。
リフレッシュレートは正確ですか?
ブラウザがフレームを描画する頻度から測っているため、近い値にはなりますが正確ではありません。省電力モード、バックグラウンドのタブ、パソコンの高負荷などにより、ディスプレイの設定値より低く表示されることがあります。
関連ガイド
- IPアドレスとは?
IPアドレスは、あなた宛てのデータをどこに届ければよいかをインターネットに伝える番号です。見た目、種類、そしてIPアドレスから何がわかるのかをまとめました。
- IPアドレスの調べ方
グローバルIPはワンクリックで確認できます。プライベートIPの調べ方は端末によって違います。端末ごとの手順をまとめました。
- IPv4とIPv6の違いとは?
IPv6は、アドレスが足りなくなったIPv4の後継です。両者の比較、どちらを使っているかの確認方法、VPN利用者にとってIPv6が重要な理由を解説します。
- DNSリークとは?原因と対策
VPNをオンにしていても、端末がアクセス先のサイトをいちいちプロバイダに問い合わせていることがあります。それがDNSリークです。見つけ方と止め方を紹介します。