iPhone 视口尺寸完整指南
这份综合指南提供了所有iPhone机型的详细视口尺寸和屏幕分辨率。对于开发响应式网站和应用程序的网页开发者和设计师来说是必不可少的信息。
视口尺寸表
| 机型 | 视口尺寸 | 屏幕分辨率 | DPR | 发布年份 |
|---|---|---|---|---|
| iPhone 16 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2024 |
| iPhone 16 Pro | 393 × 852 | 1179 × 2556 | 3 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3 | 2024 |
| iPhone 16 | 390 × 844 | 1170 × 2532 | 3 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3 | 2023 |
| iPhone 15 Plus | 428 × 926 | 1284 × 2778 | 3 | 2023 |
| iPhone 15 | 390 × 844 | 1170 × 2532 | 3 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 mini | 375 × 812 | 1080 × 2340 | 3 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 mini | 375 × 812 | 1080 × 2340 | 3 | 2020 |
理解视口尺寸
视口基础知识
在为iPhone设备进行设计时，理解视口尺寸和屏幕分辨率之间的区别至关重要：
- 视口尺寸： 您的网站可以使用的CSS像素可见区域
- 屏幕分辨率： 设备上实际的物理像素数量
- 设备像素比 (DPR)： 物理像素与CSS像素之间的比率
设计考虑
- 考虑不同的屏幕尺寸和密度
- 考虑各种宽高比
- 针对不同方向进行优化
- 在多个设备上测试
- 考虑折叠屏和双屏设备
技术实现
- 使用响应式设计技术
- 实现适当的视口元标签
- 考虑安全区域插入
- 针对不同DPR值进行优化