19 デバイス · スマートフォン
Google デバイス: CSS ビューポート、密度、画面解像度
Google デバイス 19 の表示特性が参照されており、それぞれのメディアクエリが反応する幅、ピクセル密度、パネル解像度が示されています。これらのデバイスのうち 8 はブラウザで直接テストできます。
スマートフォン Google
6 の異なる CSS 幅が全範囲をカバーしています：360, 393, 410, 411, 412 と 448 px。複数のモデルが同じ幅を共有しているため、1つを検証するだけで他のものも検証できます。
| モデル | CSSビューポート | 密度 | パネル解像度 | 対角線 | 年 |
|---|---|---|---|---|---|
| Google Pixel 11 PRO | 410 × 914 | 3.125x | 1280 × 2856 | 6.3" | 2026 |
| Google Pixel 11 Pro XL | 448 × 997 | 3x | 1344 × 2992 | 6.8" | 2026 |
| Google Pixel 10 | 412 × 924 | 2.625x | 1082 × 2426 | — | 2025 |
| Google Pixel 10 PRO | 410 × 912 | 3.125x | 1281 × 2850 | — | 2025 |
| Pixel 10 PRO Fold（折りたたみ） | 412 × 901 | 2.625x | 1080 × 2364 | 6.4" | 2025 |
| Google Pixel 8 | 412 × 915 | 2.625x | 1080 × 2400 | — | 2023 |
| Google Pixel 6 PRO | 360 × 780 | 4x | 1440 × 3120 | 6.7" | 2021 |
| Google Pixel 4a | 393 × 851 | 2.75x | 1080 × 2340 | 5.8" | 2020 |
| Google Pixel 5 | 393 × 851 | 2.75x | 1080 × 2340 | 6" | 2020 |
| Google Pixel 3a | 393 × 808 | 2.75x | 1080 × 2220 | 5.6" | 2019 |
| Google Pixel 3a XL | 412 × 823 | 2.625x | 1080 × 2160 | 6" | 2019 |
| Google Pixel 4 | 393 × 830 | 2.75x | 1080 × 2280 | 5.7" | 2019 |
| Google Pixel 4 XL | 412 × 869 | 3.5x | 1440 × 3040 | 6.3" | 2019 |
| Google Pixel 3 | 393 × 786 | 2.75x | 1080 × 2160 | 5.5" | 2018 |
| Google Pixel 3 XL | 412 × 846 | 3.5x | 1440 × 2960 | 6.3" | 2018 |
| Google Pixel 2 | 412 × 732 | 2.625x | 1080 × 1920 | 5" | 2017 |
| Google Pixel 2 XL | 412 × 823 | 3.5x | 1440 × 2880 | 6" | 2017 |
| Google Pixel | 411 × 731 | 2.6x | 1080 × 1920 | 5" | 2016 |
| Google Pixel XL | 412 × 732 | 3.5x | 1440 × 2560 | 5.5" | 2016 |
優先的にテストする幅
最も多くのモデルで使用されている幅は 360, 393, 410 と 412 px です。これらを最初に確認することで、参照されている Google モデル 19 のうち 17 をカバーし、最初のブレークポイントを設定する必要があります。
360 pxまで下げて、Google Pixel 6 PROを含むすべての範囲をカバーします。この幅に収まるレイアウトはどこでも収まります。まだ流通している最も古いモデルも含まれます。
高さに注意してください。モバイルブラウザはインターフェースバーで表示領域を縮小し、スクロールするとこれらが縮小します。そのため、100vh の高さは最初の画面を超えます。svh と dvh の単位が推奨されます。
Google デバイス 8 でサイトをテスト、1つも購入せずに
表は測定値を示します。拡張機能は、モデルの正確なビューポートでサイトを表示し、その密度、User-Agent、および縦向きまたは横向きの切り替えを行います。
- Google デバイス 8 がすぐに使用可能、古いモデルから今年の新作まで
- デバイス形式でエクスポートされたキャプチャとビデオ
- ローカル環境とプリプロダクションで動作
無料 · 4.93/5 (5,100件のレビュー)
1,600,000+ ユーザー
よくある質問
Google で最も一般的な CSS ビューポートは何ですか？
412 x 924 px は、参照されている 19 モデルのうち 9 に共有されており、Google Pixel 10とPixel 10 PRO Fold（折りたたみ） を含みます。この範囲で最初に確認すべき幅です。
Google デバイスをカバーするためにテストする最小幅は何ですか？
360 px、リスト内で最も狭いモデルの幅、Google Pixel 6 PRO。レイアウトが360 pxに収まる場合、19台のGoogleデバイスに収まり、最も広いものは448 pxに達します。
Google が発表した解像度が CSS ビューポートと一致しないのはなぜですか？
これらの画面は、1 CSS ピクセルあたり複数の物理ピクセルを表示するためです。Google Pixel 11 PRO は 1280 x 2856 ピクセルのパネルと 410 x 914 px の CSS ビューポートを持ち、密度は 3.125 です。メディアクエリにはこの2番目の値を記述する必要があります。
Google デバイスを持たずにサイトをテストするにはどうすればよいですか？
Mobile FIRST拡張機能を使用して：これらのモデルの8のビューポート、ピクセル密度、User-Agent、およびタッチイベントをブラウザ内で直接再現します。localhostアドレスでも可能です。
引用されたブランドとモデルは、それぞれの所有者に帰属します。