画面解像度チェッカー

画面解像度は上のツールカードの最上部に表示されます — 例えば1920 × 1080です。これはCSSピクセル単位の画面サイズで、ブラウザがレイアウトに使う論理単位です。その下には、ディスプレイのスケーリングを考慮した推定物理解像度も表示されます。2つの数値が異なる場合、ディスプレイはスケーリングが有効な状態で動作しています — 高解像度パネルでは正常で推奨される設定です。値がリアルタイムに変わる様子を見るには、ブラウザウィンドウのサイズを変更するか、別のモニターへ移動させてください。

最近の高解像度ディスプレイは、文字やアイコンを快適なサイズに保つためにスケーリングを使います。150%スケーリングの4Kモニターは、パネルが物理的に3840 × 2160を描画していても2560 × 1440 CSSピクセルを報告します。ブラウザのscreen.widthとscreen.heightは常にCSSピクセルを使うため、報告される解像度はスケーリング後の論理解像度です。これにデバイスピクセル比を掛けると物理解像度が得られ、このページの物理解像度の推定はまさにその計算を行っています。

デバイスピクセル比は、ブラウザが1つのCSSピクセルを描くのに使う物理ピクセルの数です。DPRが1なら1 CSSピクセル＝1物理ピクセルです。DPRが2（Retinaや最近のノートPCで一般的）の場合、各CSSピクセルは2 × 2の物理ピクセルのブロックで描画され、コンテンツがより鮮明になります。DPRはズームでも変化します。ブラウザのズームを125%にすると報告されるDPRは1.25倍になり、これが物理解像度の推定に「概算」と付く理由です。

画面解像度はディスプレイ全体 — モニターやスマートフォンの画面そのもの — を表します。ビューポートはブラウザウィンドウ内でウェブページが見えている部分です。ブラウザのツールバー、インターフェースバー、サイドバー、スクロールバーは含まれません。ブラウザを最大化していればビューポートは画面よりわずかに小さく、小さな浮動ウィンドウでははるかに小さくなります。ウェブ開発者がレスポンシブレイアウトを作るときに使うのは画面解像度ではなくビューポートサイズで、だからこそこのページでは両方を並べて表示しています。

物理解像度はCSS解像度にデバイスピクセル比を掛け、整数ピクセルに丸めて計算されます。2つの要因がこれを推定値にしています。ブラウザのズームが報告されるDPRを変えること（110%ズームではDPR 2が2.2として報告されます）、そして一部のブラウザが画面の寸法に独自の丸めを適用することです。ブラウザのズームが100%のとき推定値は正確になるため、正確な測定が必要な場合はズームをリセット（Ctrl/Cmd + 0）して確認することをおすすめします。

利用可能な領域とは、Windowsのタスクバー、macOSのDock、モバイル端末の固定システムバーなど、常駐するOS要素に占有されていない画面の部分です。1920 × 1080の画面で既定のWindowsタスクバーがある場合、利用可能な高さは1040ピクセル以下として報告されます。アプリケーション — 最大化したブラウザウィンドウも含めて — はこの利用可能領域の中に配置されるため、最大化したウィンドウが実際に得られるスペースを計算するときには、こちらの数値の方が実用的です。

このページを開いて物理解像度の推定値を読んでください — ブラウザのズームが100%ならパネルのネイティブ解像度と一致します。スケーリングはハードウェアが描画するピクセル数を変えられないからです。OS側でも照合できます。Windowsでは「設定 › システム › ディスプレイ」の「ディスプレイの解像度」を確認してください（「推奨」と表示される項目がネイティブ解像度です）。macOSでは「システム設定 › ディスプレイ」を開いてください — 「ディスプレイのデフォルト」を選ぶと、通常はネイティブ解像度に鮮明さのためのスケーリングが適用されます。

はい。標準的なブラウザインターフェースしか使わないため、デスクトップだけでなくAndroidやiOSのブラウザでも動作します。モバイルでは、報告される画面解像度は通常デバイスの論理（CSS）解像度です — 例えば多くのAndroidスマートフォンでは393 × 851です — 一方、物理解像度の推定値は実際のパネルを反映します。デバイスを回転させると、向き、アスペクト比、両方の寸法がリアルタイムで入れ替わるのが確認できます。モバイルの利用可能領域はシステムのステータスバーとナビゲーションバーを除いたものです。

はい — 完全に。料金も登録もダウンロードもなく、確認回数の制限もありません。すべての測定はブラウザ内でローカルに行われます。ページが画面・ウィンドウ・表示設定を読み取り、その場で表示するだけです。画面データ、デバイスフィンガープリント、利用統計がサーバーへ送信されることはなく、タブを閉じた後に何かが保存されることもありません。ページを一度読み込めば、オフラインでも実行できます。

カードは設計上リアルタイムで更新されます。ウィンドウのリサイズはビューポートを変え、ズームはデバイスピクセル比を変えて物理解像度の推定にも影響し、スマートフォンの回転は幅と高さを入れ替え、ウィンドウを2台目のモニターへ移すと移動先の画面を再測定します。あなたが何も操作していないのに数値が変わった場合は、外部の要因が原因です — 例えばディスプレイのスリープ、ドッキングしたノートPCの出力切り替え、アクセシビリティのためにOSが自動でスケーリングを変更した、などです。

唯一の正解はありません。適切な解像度はパネルのサイズと視聴距離によって変わるからです。目安として、1920 × 1080は今も最も広く使われているデスクトップ解像度で、2560 × 1440は27インチ以上のモニターに適し、3840 × 2160は32インチ以上のディスプレイに向いています（そのサイズなら高いピクセル密度が実際に活かせます）。ノートPCでは、高密度パネルとOSのスケーリングを組み合わせた方が、低解像度パネルを100%で使うより文字が鮮明になるのが普通です。

解像度はピクセル数を数え、サイズはパネルの対角長をインチで測ります。両者は独立しています。24インチのモニターと32インチのモニターがどちらも1920 × 1080であることはありますが、狭い方に同じピクセル数が詰まっているため小さな方が鮮明に見えます。この密度は1インチあたりのピクセル数で表され、文字の鮮明さを実際に決めるのはこの値です — だから高解像度のノートPCパネルが、より大きな低解像度のデスクトップモニターより美しく見えることがよくあります。