ビューポートの解像度(CSSルール)
これはデザイナーや開発者が最も関心を持つ解像度であり、ブレークポイントやメディアクエリの定義を決定します。通常、この解像度についてのみ話します。
Google Pixel 6 PROに関しては、それは:
- 360 ピクセル 幅(width)
- 780 ピクセル 高さ(height)⚠️高さは目安です。Safari、Chromeなどのブラウザは表示領域を縮小します
ℹ️ 一部の分析ツールは、上記の解像度ではなく、製造元の解像度(以下)を表示するだけです。したがって、結果を解釈する際には注意が必要です。
シミュレーターで利用可能
レスポンシブサイトをテスト Google Pixel 6 PRO ブラウザ拡張機能のおかげで。
無料で、2クリックで有効化できます。
ピクセル密度
Google Pixel 6 PROでは、それは 4
このピクセル密度以上のデバイスをCSSでターゲットにしたい場合は、このメディアクエリを使用できます。
@media only screen and (-webkit-min-device-pixel-ratio: 4) {
/* CSS */
}
また、JavaScriptでもピクセル密度の値を取得できます。
window.devicePixelRatio
// これにより数値が返されます 4
製造元の解像度 Google Pixel 6 PRO
ピクセル密度を考慮すると、それは:
- 1440 幅のピクセル
- 3120 高さのピクセル
PNG形式の無料HDモックアップ

保存