monitor 画面解像度チェッカー star

「デバイスピクセル比」が実際に測っているもの

すべてのディスプレイは固定された物理ピクセルの格子 — つまりネイティブ解像度 — を持っていますが、Webページは解像度に依存しない単位であるCSSピクセルでレイアウトされます。デバイスピクセル比(DPR)は、この2つの間の変換係数です。1つのCSSピクセルが何個の物理ピクセルで描画されるかを表します。標準密度の画面ではDPRは1で、両者は1対1で一致します。「Retina」や高DPIの画面では、DPRは通常2または3で、1つのCSSピクセルが実際には2×2(4個の物理ピクセル)または3×3(9個の物理ピクセル)のブロックにわたって描画されることを意味します。こうした画面でテキストやアイコンが明らかに鮮明に見えるのはこのためです — OSとブラウザは、同じ論理ピクセルを描画するのに4倍または9倍の物理的な点を利用できるため、曲線や輪郭を粗く近似する必要がなくなるのです。

このページは、上のカードに表示されているすべての値と同様に、この数値も実際のブラウザAPIから直接読み取っています。window.screenはディスプレイのネイティブな幅、高さ、色深度を報告し、window.devicePixelRatioはCSSピクセルと物理ピクセルの比率を報告します。ブラウザのビューポートの数値はwindow.innerWidth/innerHeightから取得されます — この数値が画面解像度より小さいのはこのためです。タブ、アドレスバー、ウィンドウの枠が占めるスペースが除外されているのです。ウィンドウのサイズを変更すると、これらの数値はリアルタイムで更新されます。キャッシュではなくブラウザから直接読み取っているからです。

この情報が役立つ場面

代表的な用途としては、数値を推測することなくテクニカルサポートに自分の環境を正確に伝える、レスポンシブデザインが実際にお使いの端末上でどのピクセル寸法を扱うことになるのかを確認する、新しく接続したモニターが、より低い代替モードではなくネイティブ解像度をきちんとネゴシエーションできているかを確認する、あるいは第2ディスプレイとして接続したテレビが正しい信号を受け取っているかを検証する、といったことが挙げられます。ワンクリックのコピーボタンを押せば、すべての値を整理したテキスト要約が取得でき、サポートチケットやバグレポートにそのまま貼り付けられます。

カードに表示される色深度も、ピクセル比と似たチャンネルごとの原理で動作します。一般的な24ビットのディスプレイは、赤・緑・青それぞれに8ビットずつを割り当て、1ピクセルあたり約1670万色を表現できます。一方、一部のプロフェッショナル向けディスプレイやHDRディスプレイは、より繊細な階調のために30ビットや36ビットの深度を報告します。向き(縦向きか横向きか)とタッチ対応の情報がこの全体像を完成させます。どちらも、画面の寸法から推測したりユーザーエージェントを解析したりするのではなく、同じwindow.screenやnavigatorインターフェースからリアルタイムに読み取られています。