画面解像度チェッカー
1920 x 1080 の画面のアスペクト比は 16:9、約 2.1 百万画素です。1440 x 900 の画面でデバイスピクセル比が 2 なら、デバイスピクセルは 2880 x 1800 になります。
使い方
- ページを開くだけで、画面の値がすぐに表示されます。ボタン操作は不要です。
- ウィンドウのサイズ変更、端末の回転、別のモニターへの移動をすると、値も更新されます。
- コピーを押すと、テキスト形式の一覧がクリップボードに入ります。サポートへの問い合わせなどに貼り付けられます。
計算方法
画面サイズは screen.width x screen.height で、CSS ピクセル単位です。ブラウザのビューポートは window.innerWidth x window.innerHeight で、Webページが使える領域を指します。
物理解像度は推定値で、画面サイズに window.devicePixelRatio を掛けて四捨五入したものです。ピクセル比が 2 のディスプレイでは、CSS ピクセルで 1440 x 900 の画面は 2880 x 1800 デバイスピクセルと表示されます。
アスペクト比は、16:9 や 16:10 など一般的な比率との差が 0.5 パーセント以内ならその比率に、それ以外は約分した正確な比で表示します。
CSS ピクセルとデバイスピクセル
Webページは、画面が違っても文字が同じような大きさに見えるよう、CSS ピクセルでレイアウトされます。高密度ディスプレイでは 1 CSS ピクセルに複数のデバイスピクセルが入り、デバイスピクセル比はその数を表します。
OS の表示スケールとブラウザのズームのどちらもこの比率を変えるため、同じモニターでも環境によって違う値が報告されます。
よくある質問
モニターの仕様より低い解像度が表示されるのはなぜですか。
ブラウザは CSS ピクセルでサイズを報告します。OS の表示スケールを 150 パーセントなどにしていると、1 CSS ピクセルが複数のデバイスピクセルにまたがります。推定物理解像度は、ピクセル比を掛けてその分を戻した値です。
ページをズームすると数値が変わるのはなぜですか。
デスクトップの多くのブラウザでは、ページのズームでデバイスピクセル比とビューポートの値が変わります。ズームを 100 パーセントに戻すと、通常の値が読み取れます。
画面サイズとビューポートの違いは何ですか。
画面サイズはディスプレイ全体です。ビューポートは、ブラウザのウィンドウ内でページが描画される部分だけで、ツールバーやタブ、外側のスクロールバーは含みません。
物理解像度はいつも正確ですか。
いいえ。ブラウザの報告値から計算するため、四捨五入で 1 ピクセルずれたり、ブラウザや OS が公開しない拡大率を使っていると食い違ったりします。正確なネイティブ解像度は、ディスプレイ設定で確認してください。