このページでわかること
上部の大きな数字は、ブラウザが報告している画面解像度です。下の表には、Webデザイナーや開発者、サポート担当者がよく尋ねる情報をまとめています。ウィンドウのサイズを変えると値はすぐに更新され、すべての情報をコピーを押すと表全体がテキストとしてコピーされるので、不具合の報告やサポートへの問い合わせにそのまま貼り付けられます。
| 画面解像度 | Webページがレイアウトに使う単位であるCSSピクセルで表した、画面全体の大きさです。 |
|---|---|
| 物理ピクセル(概算) | 画面解像度 × デバイスピクセル比で、たいていはパネルの実際のピクセル数です。 |
| デバイスピクセル比 | CSSピクセル1つを、縦横それぞれいくつの物理ピクセルで描くかを表します。 |
| ブラウザのウィンドウ(ビューポート) | スクロールバーを含む、ブラウザのウィンドウ内側の大きさ(CSSピクセル)です。 |
| 利用可能な画面領域 | WindowsのタスクバーやmacOSのDockなど、常に表示されているバーを除いた画面の大きさです。 |
| 色深度 | 1ピクセルあたりのビット数です。24ビットは赤・緑・青にそれぞれ8ビットずつで、約1,670万色を表せます。 |
| ブラウザとOS | ユーザーエージェント文字列と、ChromeやEdgeではブラウザが追加で提供する情報から判定します。 |
| CPUスレッド数とメモリ | 論理プロセッサの数です。メモリはChromium系のブラウザだけが報告し、丸められたうえ8 GBが上限なので「以上」と表示します。 |
残りの行は、画面の向き、タッチ対応、言語、タイムゾーン、ダークモードの設定、Cookieが有効かどうかです。ここに表示されるタイムゾーンは、タイムゾーン変換が自分のタイムゾーンとして使うものです。
CSSピクセル、物理ピクセル、devicePixelRatio
CSSピクセルは画面上の点そのものではなく、レイアウトのための単位です。一般的なモニターではCSSピクセル1つが物理ピクセル1つですが、スマートフォンや高密度のノートPCでは複数の物理ピクセルで1つのCSSピクセルを描くため、文字の実際の大きさは同じまま、よりくっきり見えます。この関係を表すのが window.devicePixelRatio です。標準設定のRetinaディスプレイのMacでは2、最近の多くのiPhoneでは3、表示スケールを使っているWindowsのノートPCでは1.25や1.5といった値になります。
そのため、レイアウトやメディアクエリはCSSピクセルで動き、画像には表示サイズより多くのピクセルが必要になります。比率が2の画面で幅400 CSSピクセルに表示する画像をくっきり見せるには、幅800ピクセルのファイルが必要です。こうした画像は画像リサイズで作れます。
例
- 表示スケール125%のフルHDノートPCでは1536 × 864、デバイスピクセル比1.25と表示され、物理ピクセルの行に実際の1920 × 1080が出ます。
- 4Kモニターは、150%では2560 × 1440で比率1.5、200%では1920 × 1080で比率2と表示されます。どちらの場合も物理ピクセルは3840 × 2160です。
- iPhone 15は393 × 852、比率3と表示され、物理ピクセルでは1179 × 2556です。
- ブラウザのズームでも値は変わります。Chrome、Edge、Firefoxで200%に拡大すると、デバイスピクセル比は2倍になり、ビューポートのCSSピクセルの大きさは半分になります。値がおかしいと思ったら、Ctrl+0(Macは⌘+0)でズームを元に戻してください。
物理ピクセルの値は推定です。Macで「スケーリング」された解像度を使っていると、macOSは画面をその2倍の大きさで描いてからパネルに合わせて縮小するため、ディスプレイ本来の解像度と一致しないことがあります。
よくある画面解像度
| 1366 × 768 | 古いノートPCや低価格のノートPC |
|---|---|
| 1536 × 864 | 表示スケール125%のフルHDノートPC(CSSピクセル) |
| 1920 × 1080 | フルHD:デスクトップモニターで最も一般的な解像度 |
| 2560 × 1440 | WQHD / 1440p:ゲーミングモニターや仕事用モニターで人気 |
| 3840 × 2160 | 4K UHD:テレビや高性能モニター。ふつうは拡大表示で使用 |
| 390 × 844、393 × 852 | 最近のiPhone(CSSピクセル) |
| 360 × 800、412 × 915 | 一般的なAndroidスマートフォン(CSSピクセル) |
プライバシー
このページは標準的なブラウザの機能で値を読み取り、あなたにだけ表示します。どこにも送信しません。ただし、同じ情報はどのWebサイトでも読み取れ、組み合わせるとブラウザの識別に使われることがあります。これをフィンガープリンティングと呼びます。そのため、プライバシーを重視する一部のブラウザは画面サイズなどの値を丸めたり一般的な値にそろえたりしており、Chromeもユーザーエージェント文字列に含める情報を減らしています。
よくある質問
4Kモニターなのに2560 × 1440や1920 × 1080と表示されるのはなぜですか?
文字が小さくなりすぎないよう、OSが表示スケール(150%や200%など)をかけているためです。パネル本来の解像度は物理ピクセルの行で確認できます。
ビューポートが画面より小さいのはなぜですか?
ビューポートには、ブラウザのタブやアドレスバー、タスクバーやDockが含まれず、ウィンドウのサイズを変えると一緒に変わります。スマートフォンでは、アドレスバーが出たり隠れたりするときにも変わることがあります。
新しいAndroidなのに「Android 10」と表示されるのはなぜですか?
Android版のChromeは、フィンガープリンティングを減らすためにユーザーエージェント文字列に固定のAndroidバージョンを書いているため、この文字列からは実際のバージョンがわかりません。
Windowsが「Windows 10または11」と表示されるのはなぜですか?
どちらのバージョンも同じユーザーエージェント文字列を送るためです。ChromeとEdgeは別のブラウザ機能で違いを伝えるので、これらのブラウザでは正確なバージョンが表示されます。
画面の解像度はどうやって変えますか?
Windowsでは設定 › システム › ディスプレイで解像度や拡大率を変更します。Macではシステム設定 › ディスプレイを使います。拡大率を変えるとCSSピクセルでの大きさが、解像度を変えるとモニターに送られるピクセル数が変わります。