iPhone 视口尺寸完整指南
这份综合指南提供了所有iPhone机型的详细视口尺寸和屏幕分辨率。对于开发响应式网站和应用程序的网页开发者和设计师来说是必不可少的信息。
视口尺寸表
| 机型 | 视口尺寸 | 屏幕分辨率 | DPR | 发布年份 |
|---|---|---|---|---|
| iPhone 16 Pro Max | 440 × 956 | 1320 × 2868 | 3.0 | 2024 |
| iPhone 16 Pro | 402 × 874 | 1206 × 2622 | 3.0 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3.0 | 2024 |
| iPhone 16 | 393 × 852 | 1179 × 2556 | 3.0 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3.0 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3.0 | 2023 |
| iPhone 15 Plus | 430 × 932 | 1290 × 2796 | 3.0 | 2023 |
| iPhone 15 | 393 × 852 | 1179 × 2556 | 3.0 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3.0 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3.0 | 2022 |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | 3.0 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3.0 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3.0 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3.0 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3.0 | 2021 |
| iPhone 13 mini | 375 × 812 | 1125 × 2436 | 3.0 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3.0 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3.0 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3.0 | 2020 |
| iPhone 12 mini | 375 × 812 | 1125 × 2436 | 3.0 | 2020 |
| iPhone SE (3rd gen) | 375 × 667 | 750 × 1334 | 2.0 | 2022 |
| iPhone 11 Pro Max | 414 × 896 | 1242 × 2688 | 3.0 | 2019 |
| iPhone 11 Pro | 375 × 812 | 1125 × 2436 | 3.0 | 2019 |
| iPhone 11 | 414 × 896 | 828 × 1792 | 2.0 | 2019 |
| iPhone XS Max | 414 × 896 | 1242 × 2688 | 3.0 | 2018 |
| iPhone XS | 375 × 812 | 1125 × 2436 | 3.0 | 2018 |
| iPhone XR | 414 × 896 | 828 × 1792 | 2.0 | 2018 |
| iPhone X | 375 × 812 | 1125 × 2436 | 3.0 | 2017 |
| iPhone 8 Plus | 414 × 736 | 1080 × 1920 | 2.6 | 2017 |
| iPhone 8 | 375 × 667 | 750 × 1334 | 2.0 | 2017 |
| iPhone 7 Plus | 414 × 736 | 1080 × 1920 | 2.6 | 2016 |
| iPhone 7 | 375 × 667 | 750 × 1334 | 2.0 | 2016 |
| iPhone SE (1st gen) | 320 × 568 | 640 × 1136 | 2.0 | 2016 |
| iPhone 6s Plus | 414 × 736 | 1080 × 1920 | 2.6 | 2015 |
| iPhone 6s | 375 × 667 | 750 × 1334 | 2.0 | 2015 |
理解视口尺寸
视口基础知识
- 视口尺寸： 您的网站可以使用的CSS像素可见区域
- 屏幕分辨率： 设备上实际的物理像素数量
- 设备像素比 (DPR)： 物理像素与CSS像素之间的比率
设计考虑
- 考虑不同的屏幕尺寸和密度
- 考虑各种宽高比
- 针对不同方向进行优化
- 在多个设备上测试
- 考虑折叠屏和双屏设备