画面解像度チェック

この画面の実際の解像度と、Webが使うサイズを一緒に表示します

画面解像度チェックは、ページを開いた瞬間にこの端末の画面の値を読み取り、実ピクセル基準の解像度をいちばん大きく表示します。多くの解像度確認サイトは、ブラウザーが通知する CSS ピクセルの値をそのまま解像度として表示するため、1920 × 1080 のモニターが 1536 × 864 と表示されることがよくあります。このツールは OS の拡大率を掛けて実ピクセルに戻し、Chrome・Edge のようにウィンドウの大きさからズームの段階を割り出せるブラウザーでは、ブラウザーのズームも差し引いて計算します。

答えの下にある画面の図面は、画面全体、タスクバー、ブラウザーの窓、ページが実際に表示される領域を縮尺どおりに描きます。ウィンドウの大きさを変えたり別の場所へ動かしたりすると図面も追従するので、数値が何を指しているのかを目で確かめられます。そのほか、ピクセルの細かさ、画面が表示できると通知している色域とHDR、OS・ブラウザー・グラフィックの情報も1つの表にまとめました。すべての値はこのブラウザー内だけで計算し、保存も送信もしません。

解像度を確認したいとき

• 新しいモニターやノートPCを接続したとき: モニターが4Kに対応していても、ケーブルや設定によってはより低い解像度になることがあります。実ピクセルがモニターの仕様と同じか、まず確かめます。
• 文字がぼやける、または小さすぎるとき: 推奨ではない解像度を選ぶと文字がぼやけ、倍率が低すぎると文字が小さくなります。解像度と倍率を一緒に見れば、どちらが原因か切り分けられます。
• ゲームや動画の画質設定を選ぶとき: QHD モニターで4K動画を選んだり、FHD モニターで QHD のゲーム解像度を選んだりすると、画面より大きな映像を縮小して見ることになります。基準は画面の実ピクセルに合わせることです。
• Webページが欠けたり崩れたりして問い合わせるとき: サポート窓口や開発者は、たいてい解像度・倍率・ブラウザー・ウィンドウの大きさを尋ねます。「結果をコピー」を押すと、これらの値が一度に文章としてまとまります。
• レスポンシブなWebサイトを作る、または確認するとき: ページのレイアウトは実ピクセルではなく、表示領域の CSS 幅で切り替わります。ウィンドウを狭めながら図面と表示領域の数値を見れば、いまどの幅に当たっているかが分かります。
• 写真や動画の作業の前に色域とHDRを確かめるとき: 広色域(P3)の写真やHDR動画は、画面とブラウザーの両方が対応していないと正しく表示されません。
• 中古のノートPCやモニターを売買するとき: 出品情報の解像度と実際の画面の解像度が同じか、グラフィックの情報が合っているかを、その場で確認できます。

使い方

1. 確認したい画面でこのページを開きます。 モニターを複数使っている場合は、確認したいモニターへブラウザーの窓を移動します。
2. いちばん上の大きな数字を見ます。 この数字が画面の実際の解像度です。下のタグに解像度の名前・アスペクト比・画素数が、その下の文に、拡大率の影響でWebでは何ピクセルとして扱われるかが表示されます。
3. 右側の小さな4つの欄を見ます。 Webでのサイズ、倍率(DPR)、ブラウザーのズーム、表示領域の順に表示されます。ズームが100%でなければ、Ctrl+0(Macは ⌘+0)で戻してからもう一度確認します。
4. 画面の図面で窓を動かしてみます。 ウィンドウの大きさを変えたり移動したりすると、窓と表示領域が図面の上で追従します。「実ピクセル」と「CSSピクセル」のボタンで、図面の数値の単位を切り替えられます。
5. モニターが複数なら「全モニター表示」を押します。 Chrome・Edge で許可すると、モニターの配置と、モニターごとの名前・解像度・倍率が一緒に表示されます。
6. 必要なら画面の対角のインチ数を入れます。 画素密度(PPI)、画面の幅と高さの長さ、ドット間隔が計算されます。
7. 「結果をコピー」を押します。 解像度・倍率・窓の大きさ・色・OS・ブラウザー・グラフィックが文章としてコピーされ、問い合わせ文やメモに貼り付けられます。

数値の読み方: 実ピクセル、CSSピクセル、倍率

画面には2種類の数値があります。モニターのパネルにあるドットの数である実ピクセルと、Webページが大きさを測るときに使うCSSピクセルです。CSS 1px はもともと96dpiの画面のドット1つ分を基準に決められた単位なので、ドットが細かい画面では、CSS 1px を実ピクセル複数個で描画します。その比率が倍率(devicePixelRatio、DPR)で、OS の拡大率の設定とブラウザーのズームを掛け合わせた値です。

実ピクセル = CSSピクセル × OSの拡大率 = CSSピクセル × 倍率(DPR) ÷ ブラウザーのズーム

次の表は、倍率が数値をどう変えるかを示す計算例です。ブラウザーは CSS サイズを整数に丸めて通知するため、倍率が小数だと掛け算の結果が数ピクセルずれます。このツールは、そのずれの範囲に収まる標準的な解像度の値(1080・1366・1440 など)を選んで表示します。

Chrome・Edge のような Chromium 系でズームを設定すると、倍率は大きくなりますが、ブラウザーが通知する画面サイズとウィンドウ外側のサイズは変わりません(ロベリンが2026-11-01に、ズーム50%・125%・200%で確認)。そのため、ウィンドウ外側のサイズを内側のサイズで割るとズームの段階を割り出せ、このツールは、幅と高さが同じ段階を指すときだけその値を差し引いて実ピクセルを計算します。横に並んだサイドパネルや開発者ツールは幅だけを狭めてズームのように見せるため、たいていは「不明」としますが、まれに別の段階として読み取ることがあります。Firefox と Safari はこの方法が当てはまらないので、ズームを「不明」にして倍率をそのまま使います。もっとも正確な値は、ズームを100%にしてサイドパネルを閉じた状態で得られます。

解像度の名前とアスペクト比: HD、FHD、QHD、4K

FHD・QHD・4K といった名前は、決まったピクセル数を縮めて呼んだものです。下の図は、よくある4つの解像度を同じ縮尺で重ねたもので、FHD は HD の2.25倍、4K UHD は FHD のちょうど4倍の画素数です。表にこの画面と同じ解像度があれば、その行に「この画面」の印が付きます。

アスペクト比は長辺と短辺の比率です。1366 × 768 は正確な16:9ではありませんが、ごく近いので16:9と呼ばれます。2560 × 1080 や 3440 × 1440 のように21:9として売られているウルトラワイドの実際の比率は、2.37:1 や 2.39:1 です。スマートフォンは、1080 × 2340 を19.5:9、1080 × 2400 を20:9のように、縦に長い比率で呼びます。4Kは、テレビ・モニターの 3840 × 2160(UHD)と、映画館基準の 4096 × 2160(DCI 4K)が別物なので、モニター仕様の4Kはたいてい 3840 × 2160 です。

画面サイズ(インチ)と画素密度

同じ解像度でも、画面が大きければドットは粗くなります。画素密度(PPI)は、対角のピクセル数を対角のインチ数で割った値です。作業エリアの「画面の対角」欄にインチ数を入れると、この画面のPPIと幅・高さの長さが計算されます。ブラウザーは画面の物理的な大きさを通知しないので、インチ数は自分で入れる必要があります。

PPI = √(幅² + 高さ²) ÷ 対角インチ · 幅の長さ(cm) = 対角 × 2.54 × 幅 ÷ √(幅² + 高さ²)

27型モニターなら、FHD は約82 PPI、QHD は約109 PPI、4K は約163 PPI です。ドットが細かいほど文字はなめらかですが、倍率100%では文字が小さくなるため、高密度の画面ほど OS の拡大率を上げて使います。ピクセル拡大鏡の欄は、この倍率が整数でないとき、CSS 1px の線が端末ピクセル2マスに分かれてかかる様子を示します。倍率125%・150%で、とても細い線や小さな文字が少しにじんで見えるのはこのためです。

OSで直接確認する場所

このツールの値が予想と違うときは、OS の設定で解像度と倍率を直接確認します。設定画面で「(推奨)」と表示された解像度が、たいていパネルの実際の解像度です。

Retina ディスプレイの Mac は倍率が2として表示されるため、このツールはブラウザーが通知した画面サイズに2を掛けます。このサイズはディスプレイ設定で選んだ解像度に従うので、パネルの画素数と異なる場合があります。ロベリンが MacBook Pro 14インチで確認したところ、システム情報のパネル解像度は 3024 × 1964 でしたが、既定より広い解像度を選んだ状態のブラウザーは画面を 1800 × 1169 と通知し、このツールは 3600 × 2338 を表示しました。パネルの画素数は、アップルメニュー > システム設定 > 一般 > 情報 > システムレポートのグラフィック/ディスプレイの項目で、あわせて確認します。

色域とHDRの読み方

色域欄の図は、人間が見られる色の全体(馬蹄形)の上に、sRGB、Display P3、Rec. 2020 の3つの三角形を描いたものです。三角形が広いほど、より濃い赤や緑を表示でき、ブラウザーがこの画面で表示できると通知した最も広い三角形が強調色で塗られます。一般的なオフィス向けモニターはたいてい sRGB と表示され、P3 に対応した Mac・iPhone や広色域モニターは P3 と表示されます。

• 広色域テストの仕組み: 2つの四角の地色は sRGB でいちばん濃い赤と緑で、文字は同じ名前の P3 の色です。sRGB の画面では、P3 の色が表示できるもっとも近い色、つまり地色と同じ色に丸められて、文字が見えません。P3 の画面では、文字が地色より濃く浮かび上がります。
• HDR: ブラウザーがこの画面をハイダイナミックレンジ(dynamic-range: high)として通知すると、「対応」と表示されます。Windows では、ディスプレイ設定のHDRがオフだと、HDR対応モニターでも標準ダイナミックレンジとして表示されることがあるので、その場合はHDRをオンにすることから確認します。
• 色深度: 仕様上、ブラウザーは色深度が分からない場合や隠したい場合に24ビットを返すことがあります。そのため24ビットと表示されても10ビットパネルの可能性があり、30ビットと表示された場合は、色ごとに10ビットで描画するという意味です。

ブラウザーで分かる端末の仕様と、分からないこと

「パソコンのスペック確認」を探す人は多いのですが、Webページが読み取れる端末の情報は、意図的に粗く丸められています。下の表の値は参考程度にとどめ、正確な仕様は OS の画面で確認してください。

間違えやすい場合

• CSSピクセルを解像度と読み違える場合: 倍率125%のFHDノートPCは、Webでは 1536 × 864 に見えます。モニターを替える必要があるのではなく、拡大率がかかっているだけです。
• ブラウザーのズームをオンにしたまま測る場合: ズームすると、倍率と表示領域が一緒に変わります。Firefox・Safari はズームを通知しないので、Ctrl+0(⌘+0)で戻してから確認します。
• 別のモニターで測る場合: このツールは、いまウィンドウがある画面を測ります。2台目のモニターを確認するには、ウィンドウをそちらへ移動します。
• Macの値をパネルの画素数と読み違える場合: ディスプレイ設定で既定以外の解像度を選ぶと、macOS が描画するサイズがパネルより大きくなったり小さくなったりすることがあります。
• スマートフォンの表示サイズを大きくした場合: Android で画面の拡大・表示サイズを大きくすると、実ピクセルはそのままで倍率が上がるため、Webサイズだけが小さくなります。iPhone の拡大表示(文字を拡大)は、画面をより小さなサイズで描いてから拡大して見せるので、このツールの値も端末の仕様より小さく表示されることがあります。
• アプリ内ブラウザーで開く場合: SNS やメッセージアプリなどのアプリ内ブラウザーでは、ブラウザー名や一部の値が違って表示されることがあります。正確に見るには、標準のブラウザーで開きます。

制限事項

• ブラウザーは、画面の物理的な大きさ(インチ)を通知しません。インチ数とPPIは、自分で入れた値から計算します。
• ブラウザーのズームは、Chrome・Edge のような Chromium 系でのみ、ウィンドウの大きさから割り出します。横に並んだ開発者ツールやサイドパネルはたいてい「不明」として扱いますが、まれに別のズーム段階として読み取ることがあるので、正確に測るにはズームを100%にしてパネルを閉じます。
• モニターが複数ある場合、全モニターの配置と名前は、Chrome・Edge で許可しないと表示されません。許可なしに描いたタスクバーの位置は目安です。
• 窓の枠やツールバーの正確なサイズは分からないため、図面の窓の中の表示領域の位置は、枠が左右で同じ幅だと見なして描きます。
• CPU・メモリ・グラフィックの値は、ブラウザーがフィンガープリンティングを防ぐために丸めたり隠したりした値です。正確な仕様は OS で確認してください。
• プライバシー保護設定の強いブラウザーは、画面サイズや端末の値をわざと変えて通知することがあります。

基準日 設定メニューの名前と出典の資料は、2026-11-01に確認しました。OS やブラウザーが更新されると、メニュー名や通知される値が変わることがあります。

出典

• 01MDN: Window.devicePixelRatio実ピクセルとCSSピクセルの比率。ページのズームは値を変え、ピンチズームは変えない
• 02MDN: Screen.availHeight画面サイズはCSSピクセル、使える領域は Dock・メニューバー・タスクバーを除いた値
• 03W3C: CSS Values and Units Level 41px = 1/96インチ、96dpiの画面を腕の長さで見たときの基準ピクセル
• 04MDN: Window.innerWidth表示領域の幅には縦スクロールバーの幅が含まれる
• 05W3C: CSS Color Module Level 4sRGB・display-p3・rec2020 色空間の赤・緑・青の座標
• 06MDN: dynamic-range・color-gamut メディア特性ハイダイナミックレンジ(HDR)と sRGB・P3・Rec. 2020 の色域を知らせるメディアクエリ
• 07W3C: CSSOM View色深度が不明または隠す場合は24を返す
• 08MDN: Window.getScreenDetails()複数モニターの配置・名前・メインかどうか、window-management 権限、Chrome 100 以降
• 09Microsoft Learn: Detect Windows 11 using User-Agent Client HintsplatformVersion のメジャーバージョンが13以上 = Windows 11、1〜10 = Windows 10
• 10Chromium: User-Agent ReductionUA文字列の macOS バージョン 10_15_7、Windows NT 10.0、Android 端末モデル K を固定
• 11WebKit Bugzilla 298473Safari が UA の iOS バージョンを18.6(18.6.2)に固定。フィンガープリンティングを減らすため恒久的に適用
• 12MDN: Navigator.deviceMemory2のべき乗に丸めたメモリ。上限・下限は実装が決める(Chrome 147 以降は 2〜32 GB)
• 13MDN: WEBGL_debug_renderer_infoグラフィックチップの名前。プライバシー設定によりブロックされたり簡略化されたりする
• 14WebKit ソース: NavigatorBase.cppフィンガープリンティングを減らすため、コア数を4または8でのみ通知
• 15W3C: Mitigating Browser Fingerprinting in Web Specificationsウィンドウサイズや端末の特性は、ブラウザーのフィンガープリンティングに使われうる
• 16Microsoft サポート: Windows で画面の解像度とレイアウトを変更するディスプレイの解像度・(推奨)の表示・スケールの場所(Windows 11・10)
• 17Microsoft サポート: Windows の HDR 設定設定 > システム > ディスプレイ > HDR、Windows 10 は Windows HD Color 設定
• 18Microsoft サポート: Windows デバイスの情報を確認するシステム > バージョン情報のデバイスの仕様で、プロセッサと RAM を確認
• 19Microsoft: How to check your GPUTask Manager > Performance > GPU の右上にグラフィックチップの名前(英語版のみ)
• 20Mac ユーザガイド: ディスプレイの解像度を変更するシステム設定 > ディスプレイで解像度を選ぶ、「リストを表示」
• 21Mac ユーザガイド: 情報設定システム設定 > 一般 > 情報でチップ・メモリ・ディスプレイ、システムレポートを確認
• 22iPhone ユーザガイド: ディスプレイとテキストの設定を調整する外観 > 拡大表示 > 文字を拡大
• 23Samsung US: Change the screen resolution on your Galaxy phoneSettings > Display > Screen resolution(HD+・FHD+・QHD+)、Screen zoom。機種によりメニューが異なる(英語版)
• 24Google Pixel ヘルプ: 画面とディスプレイの設定を管理するディスプレイとタップ > 表示サイズとテキスト
• 25Chrome ヘルプ: Chrome のキーボード ショートカットCtrl + 0(Mac は ⌘ + 0) = ページ上のすべてを標準のサイズに戻す
• 26Firefox ヘルプ: フォントサイズとズームアドレスバーのズーム率を押すと標準のズームに戻る

よくある質問

あわせて使うツール