iPhone 视口尺寸：CSS 像素、DPR 和分辨率表
查询每个 iPhone 机型的 CSS 宽高、DPR、物理分辨率和发布年份，包括 iPhone 17、16、15、SE、Pro 和 Pro Max。适合设置响应式断点、QA 检查和按设备调试布局。
数据状态： 最近更新：2026-02-08（UTC）
数据来源： Apple、Google、Samsung 官方规格页面
计算口径： iPhone 和 iPad 主要按分辨率除以 DPR 计算。Android 的 CSS 视口和 DPR 会受显示缩放、浏览器 UI 与系统设置影响。
快速答案： 先看表格顶部的最新 iPhone 机型，再对比 CSS 视口尺寸、DPR、物理分辨率和机型年份，用于设置响应式断点。
视口尺寸表
机型
视口尺寸
屏幕分辨率
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 像素宽度。
折叠屏设备会如何影响视口测试？
折叠屏在外屏和内屏下会出现差异很大的视口比例。应分别测试两种状态和横竖屏切换，避免把布局写死在单一宽度。
这些设备视口数据多久更新一次？
我们会在主要新品发布或规格更新后同步数据。上线前的关键页面，请务必再用真机或云真机进行验证。
相关资源
加载中...
→