Samsung、Pixel等のAndroidデバイスビューポートサイズ
Samsung Galaxy、Google Pixel、OnePlus、XiaomiモデルのDPR値を含むAndroidデバイスCSSビューポートサイズリファレンスガイド。
詳細な説明
Androidビューポートの多様性
Androidエコシステムは、ビューポートサイズに関してiOSよりもはるかに多様です。iPhoneがいくつかの幅にクラスタリングされるのに対し、Androidデバイスはメーカー、画面サイズ、フォームファクターの多様さにより、はるかに広い範囲にまたがります。
人気のAndroidビューポート幅
| デバイス | CSS幅 | CSS高さ | DPR |
|---|---|---|---|
| Samsung Galaxy S21-S24 | 360px | 780-800px | 3x |
| Samsung Galaxy A54 | 412px | 915px | 2.625x |
| Google Pixel 7/8 | 412px | 915px | 2.625x |
| Google Pixel 8 Pro | 448px | 998px | 2.625x |
| OnePlus 12 | 412px | 915px | 3.5x |
| Xiaomi 14 | 393px | 873px | 3x |
360pxスタンダード
SamsungのフラッグシップGalaxy Sシリーズは、多くの世代にわたって一貫して360pxのCSSビューポート幅を使用しています。これにより、360pxはAndroid向け開発における重要なブレークポイントとなっています。iPhoneの375pxと組み合わせて、360pxと375pxの両方をターゲットにすることで、モバイルユーザーの大多数をカバーできます。
非整数DPR値
iPhoneがクリーンな2xまたは3xのDPR値を使用するのに対し、多くのAndroidデバイスは2.625（Pixelフォン）や3.5（OnePlus）のような小数DPRを持っています。これにより、ボーダーや細い線がぼやけて表示されるサブピクセルレンダリングの問題が発生する可能性があります。CSSトランスフォームの使用やこれらのデバイスでの1pxボーダーの回避が視覚的なアーティファクトの軽減に役立ちます。
折りたたみデバイス
SamsungのGalaxy Z FoldとZ Flipは、デバイスが折りたたまれたり展開されたりするとビューポートサイズが動的に変化する追加の複雑さをもたらします。CSSの@media (horizontal-viewport-segments: 2)メディア機能で折りたたみ構成を検出できます。
ユースケース
SamsungとXiaomiデバイスが主流のインドおよび東南アジア市場向けのProgressive Web Appを最適化する開発チームが、適切なメディアクエリブレークポイントを設定するために正確なAndroidビューポートデータが必要な場合。