画面情報確認の無料オンラインツール。モニターの解像度・DPI・画面比率・色深度をリアルタイム確認。ブラウザ処理、インストール不要。
Ctrl+D を押してこのページをブックマークしてください
画面情報ツールは、デバイスの画面解像度、ビューポートサイズ、DPR、色深度などを表示する無料オンラインツールです。 レスポンシブデザインの開発とデバッグに便利で、リアルタイムでウィンドウサイズの変更を検出します。 ブラウザ処理、無料。 画面情報は、勉強や仕事、日常のさまざまな場面で手軽に活用できます。
DPRはCSSピクセル1つあたりの物理ピクセル数です。DPR 2はRetinaディスプレイを意味し、画像を2倍サイズで用意する必要があります。
画面解像度はモニターの物理ピクセル総数で、ビューポートはブラウザでコンテンツが表示される領域です。ビューポートはツールバーやスクロールバーを除いたサイズです。
特定の機種名に合わせて値を決めると、新機種が出るたびに破綻します。代わりに、レイアウトが実際に不自然になる地点で区切ってください。実務では480px、768px、1024px、1280px あたりがよくある出発点ですが、これは覚えやすい目安であって規則ではありません。ブラウザの幅をゆっくり狭めながら、行が長くなりすぎたりカードがつぶれたりする幅を探し、その位置にブレークポイントを置くほうがはるかに堅牢です。
CSSピクセルは物理的な画素ではなく、見た目の大きさを表す単位だからです。4K画面で表示倍率を200%にすると、物理画素3840個がCSS上は1920pxとして扱われ、文字やアイコンはより緻密で鮮明に見えます。このとき端末ピクセル比は2になるため、画像をくっきり見せるには表示サイズの2倍の解像度のファイルをsrcsetで併せて用意する必要があります。