画面解像度の確認方法
- このページを開くと、上に解像度が表示されます。
- その下でブラウザのウィンドウサイズとピクセル比を確認します。
- ウィンドウサイズを変えたりスマホを回したりして、値の変化を確かめます。
画面解像度とビューポート
画面解像度はディスプレイ全体の大きさ、ビューポートはツールバーやスクロールバーを除いた、ページが描かれるブラウザ内の領域です。Webデザインはビューポートを基準にします。
CSSピクセルと拡大率
OSは高解像度の画面で文字が小さくなりすぎないよう拡大率を使います。ブラウザはCSSピクセルで報告し、デバイスピクセル比を掛けると仕様表の実ピクセルになります。
よくある解像度
デスクトップは今も1920×1080(フルHD)が最も多く、2560×1440(WQHD)、3840×2160(4K)が続きます。スマホは横幅360〜430 CSSピクセル程度です。
よくある質問
モニターの仕様より解像度が低い
Windowsの拡大率を使うと、ブラウザはCSSピクセルで報告します。4K(3840×2160)を150%で使うと2560×1440と表示され、実ピクセルの項目に本当の値が出ます。
デバイスピクセル比とは?
CSSの1ピクセルを実際の何ピクセルで描くかです。Retinaやほとんどのスマホは2か3です。
情報はサーバーに送られますか?
いいえ。ブラウザで読み取るだけです。