Android 视口尺寸完整指南
这份综合指南提供了热门Android设备的详细视口尺寸和屏幕分辨率。对于开发响应式网站和应用程序的网页开发者和设计师来说是必不可少的信息。
视口尺寸表
| 机型 | 视口尺寸 | 屏幕分辨率 | DPR | 发布年份 |
|---|---|---|---|---|
| Samsung Galaxy S24 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2024 |
| Samsung Galaxy S24+ | 384 × 854 | 1344 × 2992 | 3.5 | 2024 |
| Samsung Galaxy S24 | 360 × 780 | 1080 × 2340 | 3.0 | 2024 |
| Google Pixel 8 Pro | 412 × 892 | 1344 × 2992 | 3.25 | 2023 |
| Google Pixel 8 | 412 × 915 | 1080 × 2400 | 2.6 | 2023 |
| Samsung Galaxy S23 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2023 |
| Samsung Galaxy S23+ | 384 × 854 | 1080 × 2340 | 2.8 | 2023 |
| Samsung Galaxy S23 | 360 × 780 | 1080 × 2340 | 3.0 | 2023 |
| Samsung Galaxy Z Fold 5 | 384 × 832 | 1812 × 2176 | 3.0 | 2023 |
| Samsung Galaxy Z Flip 5 | 412 × 915 | 1080 × 2640 | 2.6 | 2023 |
| Google Pixel 7 Pro | 412 × 892 | 1440 × 3120 | 3.5 | 2022 |
| Google Pixel 7 | 412 × 915 | 1080 × 2400 | 2.6 | 2022 |
| Samsung Galaxy S22 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2022 |
| Samsung Galaxy S22+ | 384 × 854 | 1080 × 2340 | 2.8 | 2022 |
| Samsung Galaxy S22 | 360 × 780 | 1080 × 2340 | 3.0 | 2022 |
| OnePlus 10 Pro | 412 × 919 | 1440 × 3216 | 3.5 | 2022 |
| Google Pixel 6 Pro | 412 × 892 | 1440 × 3120 | 3.5 | 2021 |
| Google Pixel 6 | 412 × 915 | 1080 × 2400 | 2.6 | 2021 |
| Samsung Galaxy S21 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2021 |
| Samsung Galaxy S21+ | 384 × 854 | 1080 × 2400 | 2.8 | 2021 |
| Samsung Galaxy S21 | 360 × 800 | 1080 × 2400 | 3.0 | 2021 |
| OnePlus 9 Pro | 412 × 919 | 1440 × 3216 | 3.5 | 2021 |
| OnePlus 9 | 412 × 915 | 1080 × 2400 | 2.6 | 2021 |
| Xiaomi Mi 11 | 360 × 800 | 1440 × 3200 | 4.0 | 2021 |
| Samsung Galaxy S20 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2020 |
| Samsung Galaxy S20+ | 384 × 854 | 1440 × 3200 | 3.75 | 2020 |
| Samsung Galaxy S20 | 360 × 800 | 1440 × 3200 | 4.0 | 2020 |
| Google Pixel 5 | 393 × 851 | 1080 × 2340 | 2.75 | 2020 |
| Google Pixel 4 XL | 412 × 869 | 1440 × 3040 | 3.5 | 2019 |
| Google Pixel 4 | 393 × 830 | 1080 × 2280 | 2.75 | 2019 |
| OnePlus 8 Pro | 412 × 919 | 1440 × 3168 | 3.5 | 2020 |
| Samsung Galaxy Note 20 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2020 |
| Samsung Galaxy S10+ | 412 × 869 | 1440 × 3040 | 3.5 | 2019 |
| Samsung Galaxy S10 | 360 × 760 | 1440 × 3040 | 4.0 | 2019 |
| Samsung Galaxy S10e | 360 × 760 | 1080 × 2280 | 3.0 | 2019 |
理解视口尺寸
视口基础知识
- 视口尺寸： 您的网站可以使用的CSS像素可见区域
- 屏幕分辨率： 设备上实际的物理像素数量
- 设备像素比 (DPR)： 物理像素与CSS像素之间的比率
- 方向： Android设备支持竖屏和横屏两种模式
设计考虑
- 为各种屏幕尺寸和密度设计
- 考虑不同的长宽比
- 针对触摸交互进行优化
- 使用适当的媒体查询
- 考虑可折叠设备