開発・Web
画面解像度の確認方法
ゲームや動画の設定、サポートのフォームで画面解像度を聞かれたのに、見つかる数字が食い違うことがあります。本当の解像度を調べ、スケールで変わる理由を知り、ブラウザのウィンドウの大きさを読み取ります。パソコン、タブレット、スマホのどれでも使えます。
ブラウザのズームでもピクセル比が変わります。先に Ctrl + 0（Mac では Cmd + 0）を押してズームを 100% に戻してください。
画面解像度を開くこの一回
ブラウザのズームを戻す
ページを拡大・縮小すると、ブラウザが報告する値が変わります。Ctrl + 0（Mac では Cmd + 0）を押してズームを 100% にします。スマホではピンチで通常の大きさに戻します。
cv.cm の画面解像度を開く
大きな数字が実ピクセルでの画面解像度で、たとえば 1920 × 1080 です。Full HD（1080p）や 4K UHD のような一般的な呼び名があれば、最初の行に表示されます。
画面解像度を開くCSS ピクセルとスケールを理解する
Windows の 125% や Retina 画面は、1 CSS ピクセルに多くの実ピクセルを使って文字を大きく表示します。「デバイスピクセル比（スケール）」がその数です。1920 × 1080 の画面を 125% にすると、1536 × 864 CSS ピクセル、比は 1.25 になります。
スケール 125% では、1920 × 1080 の実ピクセルが 1536 × 864 CSS ピクセルと報告されます。 ビューポートを見る
「ブラウザのビューポート」は、ウィンドウでページが表示される部分を CSS ピクセルで表したものです。ウィンドウの大きさを変えるとすぐに変わります。ウェブデザイナーはレスポンシブレイアウトにこの大きさを使います。
画面、タスクバーを除いた領域、ブラウザ内のビューポート。 その他の詳細を確認する
「利用可能な画面（タスクバーを除く）」はタスクバーや Dock を除いた大きさです。「縦横比」は 16:9 や 16:10 のような形を示し、「向き」と「色深度」で全体が分かります。スマホを回すと値も変わります。
サポート用に詳細をコピーする
「詳細をコピー」ですべての行をテキストでコピーします。不具合報告やサポートチャットに貼り付ければ、相手もあなたのブラウザが見ている値をそのまま確認できます。
よくある質問
Windows や Mac で画面解像度を調べるには？
Windows の 設定 → システム → ディスプレイ に出る値は、ここの大きな数字と同じです。Mac の システム設定 → ディスプレイ に出るのは「表示サイズ」で、このページの CSS サイズに当たります。大きな数字はその裏の実際のピクセル数です。
ウェブサイトが画面を実際より小さく表示するのはなぜですか？
ウェブサイトが見るのは CSS ピクセルです。表示スケールが 100% より大きいと、CSS ピクセルは実ピクセルより少なくなります。デバイスピクセル比を掛けると本当の解像度になります。
スマホの解像度は？
スマホのピクセル比は 2〜3 以上なので、390 × 844 CSS ピクセルで比が 3 のスマホは、実ピクセルでは 1170 × 2532 です。
ビューポートが大きいことは画面が大きいことと同じですか？
いいえ。ビューポートはブラウザのウィンドウのページ領域だけです。ウィンドウが全画面でないときやツールバーが場所を取るときは、画面より小さくなります。
モニターが 2 台だと値が合わないのはなぜですか？
ページはブラウザのウィンドウがある画面を読み取ります。ウィンドウを別のモニターに移すと値が更新されます。