画面解像度を確認する

計算方法

「画面解像度はいくつ？」という問いには、いくつかの正しい答えがあります。ディスプレイの物理ピクセル、ブラウザが使うCSSピクセル、そしてウェブページが実際に使えるビューポートです。このツールではそれらを並べて確認できます。

それぞれの値の意味

• 物理ピクセル：CSSピクセルでの画面サイズ × devicePixelRatio。拡大率125％のフルHDノートPCでは1536 × 864 CSSピクセルと表示され、× 1.25で実際の1920 × 1080になります。
• devicePixelRatio：1 CSSピクセルが何個の物理ピクセルでできているかを示します。1は一般的なモニター、2や3はRetinaディスプレイやスマホです。ブラウザの拡大・縮小やWindowsの表示スケールでも変わります。
• 利用可能な領域：タスクバーやDockを除いた画面の広さです。
• ビューポート：ブラウザウィンドウの内側のサイズ（innerWidth × innerHeight）です。メディアクエリやレスポンシブデザインはこの値を基準に動きます。見えている領域（visual viewport）は、スマホでピンチ操作で拡大したときやキーボードを表示したときに小さくなります。
• 縦横比：約分した正確な比（1920 × 1080 = 16:9）と、半端な値のときの一般的な呼び方（1366 × 768 ≈ 16:9）です。
• ブレークポイント：今のウィンドウ幅が、Bootstrap 5（sm 576、md 768、lg 992、xl 1200、xxl 1400px以上）とTailwind CSS（sm 640、md 768、lg 1024、xl 1280、2xl 1536px以上）のどの段階に当たるかです。

WindowsやMacの設定で確認する方法

• Windows 11：「設定」→「システム」→「ディスプレイ」→「ディスプレイの解像度」。同じ画面の「拡大/縮小」が表示スケール（devicePixelRatio）に当たります。
• Mac：アップルメニュー →「システム設定」→「ディスプレイ」。Retinaディスプレイでは、表示される「解像度」は見かけの広さ（CSSピクセルに相当）です。
• iPhone・Android：設定画面に解像度が表示されない機種も多いため、このページで確認するのが手軽です。

よく使われる解像度

注意点

ブラウザはCSSピクセルを切り捨てることがあるため、物理ピクセルにわずかなずれ（2560ではなく2561など）が出る場合があります。複数のモニターを使っている場合は、ウィンドウが今表示されている画面の値になります。フィンガープリント対策（resistFingerprinting）を有効にしたFirefoxは、意図的に標準的な値を返すことがあります。

よくある質問

出典・根拠

• MDN Web Docs – Screen
• MDN Web Docs – Window.devicePixelRatio
• MDN Web Docs – Visual Viewport API
• MDN Web Docs – prefers-color-scheme
• Bootstrap 5.3 – Breakpoints
• Tailwind CSS – Responsive design

更新日：2026年9月27日