Screen Resolution Reference

使い方

1. デバイスを検索に名前を入力します。iPhone、Pixel、iPad などで絞り込めます。
2. カテゴリを選びます：すべて、スマートフォン、タブレット、ノートパソコン、ディスプレイ。
3. 表の物理解像度・論理 CSS px・DPR・ブラウザーのビューポートを読み取ります。
4. 検索条件を変えたら絞り込むを押し、コピーで現在表示中の表をテキストとして取り出します。

こんなときに

• ブレークポイントの計画 —— どの論理 px 幅を支える必要があるかを確認できます。
• 画像サイズの決定 —— CSS px に DPR を掛けて、ヒーロー画像の書き出しサイズを決めます。
• 端末での検証 —— エミュレーターの指標を実機の公表スペックと照合します。
• スペック表の作成 —— デザイン文書で端末の正確な CSS px 値を引用できます。

プライバシーについて

データ表はページ内の定数として組み込まれており、検索とコピーもブラウザー内で行われます。検索語がどこかに送信されることはなく、オフラインでも使えます。

FAQ

Q: DPR とは何ですか？ A: デバイスピクセル比で、CSS ピクセル 1 つが物理ピクセルいくつ分に相当するかを示します。DPR が 3 なら CSS で 300 px のボックスは 900 物理ピクセルを使うため、線や文字がくっきり見えます。

Q: 論理幅は物理解像度を DPR で割った値では？ A: その関係ですが、メーカーが CSS グリッドに合わせて丸めるため、公表の論理解像度が単純な割り算と 1〜2 px ずれることがあります。

Q: ビューポートと画面はどう違いますか？ A: ビューポートはブラウザーウィンドウの中でページが実際に使える領域なので、ブラウザーの枠やシステムバーを除くと画面より小さくなります。ノートパソコンとディスプレイはウィンドウサイズによって変わります。

Q: データはどのくらい新しいですか？ A: 各端末について広く記録されている公表値を使っています。メーカーが地域別にパネルを変えることもあるため、計画の目安として扱ってください。