画面解像度とは？数値がおかしく見える理由

画面解像度とは、ディスプレイに縦と横に並んだ物理ピクセルの数を、横 × 縦の形で表したものです。例えば1920 × 1080のように書きます。この数値は、システムのディスプレイ設定で確認できます。一方、Webページで取得される数値は通常これと異なります。ブラウザーはCSSピクセルという単位で大きさを測り、この単位はOSとブラウザーによって拡大・縮小されるためです。どちらの数値も正しい場合があります。画面解像度の確認では、画面サイズ、スケーリング後のサイズ、ウィンドウのサイズを一緒に表示するので、今どの数値を見ているのかがわかります。

画面解像度の確認画面サイズは何ピクセル？無料で使う

物理ピクセルとCSSピクセル

物理ピクセルとは、パネル上にある小さな光の点の1つひとつのことです。CSSピクセルは、Webページのレイアウトに使われる単位です。CSSピクセルで800の幅があるページは、どのパネルでもウィンドウのほぼ同じ割合を占めるはずです。そのためブラウザーは、デバイスピクセル比を使ってこの2つの単位を換算しています。

デバイスピクセル比とは、CSSピクセル1つを構成する物理ピクセルの数のことです。一般的なモニターでは1ですが、高精細な画面の多くでは2以上になります。その場合、CSSピクセル1つが2 × 2の物理ピクセルのブロックで描画されるため、文字がくっきり見えます。ページがCSSピクセルで読み取る画面サイズは、物理サイズをこの比で割った値になります。

OSの表示スケーリング

多くの場合、この比はOSの表示スケーリングから生じます。Windowsでは、ディスプレイ設定の「拡大/縮小」がこれにあたります。macOSでは、ディスプレイの解像度オプションで、インターフェースに割り当てる領域の広さを調整します。4Kパネルは3840 × 2160の物理ピクセルを持っています。拡大率を200%に設定すると、インターフェースには1920 × 1080ぶんの領域が割り当てられ、その画面のブラウザーは比1の2倍となる1920 × 1080のCSSピクセルを報告します。

計算は簡単です。物理サイズを拡大率で割ります。

パネルの物理ピクセル	拡大率	CSSピクセルでの画面サイズ	比
3840 × 2160	100%	3840 × 2160	1
3840 × 2160	150%	2560 × 1440	1.5
3840 × 2160	200%	1920 × 1080	2
1920 × 1080	100%	1920 × 1080	1

拡大率によっては割り切れない場合があり、その際はブラウザーが結果を丸めます。自分で計算した値と1ピクセルずれることは珍しくありません。

ブラウザーのズームで数値が変わる

ブラウザーのズームは、ディスプレイの拡大率とは別の設定です。200%にズームすると、ページ上のすべてが2倍の大きさになります。ブラウザーはこれに合わせてデバイスピクセル比を変えるため、物理的な画面は同じでも、ウィンドウの幅はCSSピクセルで半分になります。100%のときに幅1280 CSSピクセルだったウィンドウは、ズームイン後に640と報告されることがあります。

2つの確認で数値が違って見える最も多い原因が、このズームです。数値がおかしいと感じたら、まずズームの倍率を確認してください。そのうえでCtrl+0（Macの場合はCmd+0）を押すと、100%に戻ります。

画面、利用可能な画面、ウィンドウ

混同しやすいサイズが3つあります。

画面は、OSが報告するディスプレイ全体のことです。
利用可能な画面は、Windowsのタスクバー、Macのドックやメニューバーなど、システムが確保している領域を除いたものです。画面より大きくなることはありません。
ブラウザーのウィンドウは、ビューポートとも呼ばれ、ページが描画される領域です。タブ、アドレスバー、ブックマークバーは含まれず、ウィンドウのサイズを変えるたびに変わります。

サイトが画面サイズを求めている場合、多くは画面またはウィンドウのことを指しています。数値をコピーする前に、どちらが必要かを確認してください。

リフレッシュレート、HDR、色域

リフレッシュレートとは、ディスプレイが1秒間に映像を更新する回数のことです。ブラウザーはこれを直接読み取れません。ページが測定できるのは、約1秒間に描画されたアニメーションフレームの数だけです。そのため結果は測定値であり、タブがバックグラウンドにある、パソコンが混み合っている、バッテリーセーバーが描画を制限している、といった場合には画面のレートより低く出ることがあります。概算値として扱ってください。リフレッシュレートテストはこの数を数えてフレームの時間を描画します。設定の場所については画面は本当に120Hzで動いているかで説明しています。

HDRと色域も、メディアクエリを通じて報告されます。これはブラウザーが検出した内容を示すもので、ディスプレイの性能すべてや、システムで有効になっている設定とは異なる場合があります。これらの値は目安として使ってください。

システムで数値を確認する

システムが実際に使っている数値を確認するには、ディスプレイ設定を開きます。Windows 11では、設定、システム、ディスプレイの順に進み、「ディスプレイの解像度」を見てください。macOSでは、システム設定を開いて「ディスプレイ」を選びます。どちらも拡大率後の解像度と、選択できる解像度の一覧が表示されます。

サイズがわかったら、新しい画面であれば単色の確認を次に行うとよいでしょう。ドット抜けテストは、ディスプレイを黒、白、赤、緑、青で塗りつぶし、固着した点や点灯しない点がないかを確認できます。

fixmintでの確認手順

画面解像度の確認を開きます。上部の「CSSピクセルでの画面」に結果が表示されます。
「物理ピクセル（推定）」と「デバイスピクセル比」と比べます。比が1より大きい場合、システムかブラウザーが映像を拡大・縮小しています。
ブラウザーのウィンドウサイズを変えるか、ズームを変更して、「ブラウザーのウィンドウ（リアルタイム）」の数値が変わることを確認します。Ctrl+0（Macの場合はCmd+0）を押すと、100%に戻ります。
「リフレッシュレート（測定値・概算）」を読み取ります。数値がおかしいと感じたら、「リフレッシュレートを再測定」を押してください。
「すべてコピー」を押して結果をコピーし、サポートフォームに貼り付けます。

よくある質問

モニターの解像度が本来より小さく表示されるのはなぜですか？

おそらく拡大率が100%より高く設定されています。物理的な解像度は変わらず、ページはCSSピクセルで拡大後のサイズを読み取っています。

ブラウザーのズームで画面解像度は変わりますか？

いいえ、変わりません。変わるのはページのピクセル比と、CSSピクセルで測ったウィンドウのサイズです。ズームを元に戻せば、通常の数値に戻ります。

リフレッシュレートは正確な値ですか？

いいえ、正確ではありません。約1秒間のアニメーションフレームから測定しています。バックグラウンドのタブやパソコンの負荷によって、数値が低く出ることがあります。