iPhone 视口尺寸完整指南
这份综合指南提供了所有iPhone机型的详细视口尺寸和屏幕分辨率。对于开发响应式网站和应用程序的网页开发者和设计师来说是必不可少的信息。
数据状态： 最近更新：2026-02-08（UTC）
数据来源： Apple、Google、Samsung 官方规格页面
计算口径： iPhone 和 iPad 主要按分辨率除以 DPR 计算。Android 的 CSS 视口和 DPR 会受显示缩放、浏览器 UI 与系统设置影响。
视口尺寸表
| 机型 | 视口尺寸 | 屏幕分辨率 | DPR | 发布年份 |
|---|---|---|---|---|
| iPhone 17 Pro Max | 440 × 956 | 1320 × 2868 | 3 | 2025 |
| iPhone 17 Pro | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 17 Air | 420 × 912 | 1260 × 2736 | 3 | 2025 |
| iPhone 17 | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 16e | 390 × 844 | 1170 × 2532 | 3 | 2025 |
| 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 Plus | 428 × 926 | 1284 × 2778 | 3 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3 | 2022 |
| iPhone SE (3rd generation) | 375 × 667 | 750 × 1334 | 2 | 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值进行优化
设备视口常见问题
视口尺寸是页面布局使用的 CSS 像素区域，屏幕分辨率是设备的物理像素数量。二者由 DPR 关联，但浏览器 UI 和系统缩放会改变实际视口。
即使物理分辨率接近，DPR、系统显示缩放和浏览器实现差异也会让 CSS 视口宽度不同。
这张表可作为真实设备参考，但断点应优先依据内容布局变化而不是单一机型。建议重点覆盖 360、390、412、768、820、834、1024 等 CSS 像素宽度。
折叠屏在外屏和内屏下会出现差异很大的视口比例。应分别测试两种状态和横竖屏切换，避免把布局写死在单一宽度。
我们会在主要新品发布或规格更新后同步数据。上线前的关键页面，请务必再用真机或云真机进行验证。
相关资源
加载中...