私の画面解像度は？
お使いのディスプレイ仕様を即時検出 — 設定メニュー不要
レスポンシブビューポートテスター
幅プリセットを選択して、異なるビューポート幅でコンテンツがどう再配置されるかを確認。サイズバッジはリアルタイムで更新されます。
注意：クロスオリジンのiframeはほとんどのサイトでブロックされます。このプレビューボックスは幅のみをシミュレートします。
デザインブレークポイント参照
主要フレームワークで使われる一般的なCSSブレークポイント。現在のビューポート幅がハイライトされています。
| 名称 | ブレークポイント範囲 | 一般的な用途 |
|---|
一般的な画面解像度リファレンス
| 名称 / 機種 | 解像度 | アスペクト | DPR | 代表機種 | カテゴリ |
|---|
ブラウザのUser Agent
これらの意味は？
画面解像度
画面解像度は、モニターが表示できる総ピクセル数を幅×高さ（例: 1920×1080）で表したものです。ハードウェアの特性であり、ディスプレイ設定で変更しない限り変わりません。解像度が高いほど、ピクセルが多く、画像が鮮明になり、より多くのコンテンツが表示されます。
デバイスピクセル比（DPR）
DPRは物理ピクセルとCSSピクセル（論理ピクセル）の比率です。DPR 2は、CSSピクセル1つが2×2＝4物理ピクセルで描画されることを意味し、RetinaやHiDPIディスプレイでより鮮明な表示を実現します。最新のスマートフォンの多くはDPR ≥ 2。多くのMacBookはDPR = 2。一部のAndroid端末はDPR = 3以上です。
Web開発者向け：HiDPIスクリーンに高解像度画像を配信するには、@media (-webkit-min-device-pixel-ratio: 2) またはJavaScriptのwindow.devicePixelRatioを使用してください。
ビューポート vs 画面解像度
画面解像度は固定です（例: 1920×1080）。ビューポートはブラウザウィンドウのコンテンツ領域 — ブラウザのリサイズ・DevToolsやサイドバーの開閉・ズームインで変化します。CSSメディアクエリはビューポートサイズに反応し、画面解像度には反応しません。ここに表示されるビューポートサイズはリサイズに応じてリアルタイムで更新されます。
色深度
色深度（ビット数）は各ピクセルが表示できる色数を決定します。24ビット＝1,677万色（標準トゥルーカラー）。30ビット＝10億7,000万色（ディープカラー、プロ向けディスプレイ）。最新モニターの多くは24ビットまたは30ビットです。
システム設定で画面解像度を確認する方法
- Windows 11： デスクトップを右クリック → ディスプレイ設定 → 画面の解像度
- macOS： Appleメニュー → システム設定 → ディスプレイ
- Ubuntu/Linux： 設定 → ディスプレイ
- またはこのページの上部をご覧ください — 設定メニューは不要です。
よくある質問
window.screen APIを使って自動的に検出しました。Retina/HiDPIディスプレイをお使いの場合、「物理ピクセル」の行に実際のハードウェアピクセル数（画面解像度 × DPR）が表示されます。