当前在售 iPhone 的屏幕为 6.1 到 6.9 英寸，CSS 视口宽度为 390 到 440 像素。iPhone 18 Pro 和 iPhone 17 是 6.3 英寸屏幕、402 × 874 视口；iPhone 18 Pro Max 和 17 Pro Max 是 6.9 英寸屏幕、440 × 956 视口；iPhone 17e 是 6.1 英寸屏幕、390 × 844 视口。下表列出了一直到初代 iPhone SE 的所有机型。
如何看这张表
- 屏幕是 Apple 公布的对角线尺寸（英寸）。对于圆角屏幕的机型，实际可视区域略小。
- 分辨率是屏幕的物理像素数（竖屏）。
- CSS 视口是在设置了正确的 viewport meta 标签时，网页在竖屏 Safari 中看到的尺寸，即分辨率除以像素比。响应式设计和媒体查询用的就是这个数值。
- 像素比（DPR）表示每个方向上多少个物理像素组成一个 CSS 像素。
iPhone 屏幕尺寸一览表（2016–2026）
| 机型 | 年份 | 屏幕 | 分辨率 | CSS 视口 | 像素比 |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6.9 英寸 | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6.3 英寸 | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6.1 英寸 | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6.9 英寸 | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6.3 英寸 | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6.5 英寸 | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6.3 英寸 | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6.1 英寸 | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6.9 英寸 | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6.3 英寸 | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6.7 英寸 | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6.1 英寸 | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6.7 英寸 | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6.1 英寸 | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6.7 英寸 | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6.1 英寸 | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6.7 英寸 | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6.1 英寸 | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6.7 英寸 | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6.1 英寸 | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (第 3 代) | 2022 | 4.7 英寸 | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6.7 英寸 | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6.1 英寸 | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5.4 英寸 | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6.7 英寸 | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6.1 英寸 | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5.4 英寸 | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (第 2 代) | 2020 | 4.7 英寸 | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6.5 英寸 | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5.8 英寸 | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6.1 英寸 | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6.5 英寸 | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5.8 英寸 | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6.1 英寸 | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5.8 英寸 | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5.5 英寸 | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4.7 英寸 | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5.5 英寸 | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4.7 英寸 | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (第 1 代) | 2016 | 4.0 英寸 | 640 × 1136 | 320 × 568 | 2 |
* Plus 机型先以 1242 × 2208 渲染，再缩小到 1080 × 1920 的面板上显示，所以报告的像素比是 3，而物理像素比约为 2.6。iPhone 12 mini 和 13 mini 同样是在比 3 倍所需尺寸略小的面板上渲染 375px 宽的视口。
来源：Apple 各机型的技术规格页面（屏幕尺寸和分辨率）；视口数值为分辨率除以像素比。Apple 每年都会推出新机型，最新机型请以 Apple 规格页面为准。
网页设计真正需要关注的视口宽度
这么多机型中，对布局有意义的宽度其实只有几个：
| CSS 宽度 | 机型 |
|---|---|
| 375px | SE（第 2、3 代）、8、mini 系列、X/XS/11 Pro |
| 390px | 12、13、14、16e、17e |
| 393px | 14 Pro、15、15 Pro、16 |
| 402px | 16 Pro、17、17 Pro、18 Pro |
| 414px | XR、11、XS Max、11 Pro Max、8 Plus |
| 420px | Air |
| 428–440px | Plus 和 Pro Max 系列 |
如果你的布局能在 375 到 440px 之间流畅伸缩，那么它在过去八年售出的所有 iPhone 上都能正常显示。如果想兼顾旧设备和放大字号的用户，也可以测一下 320px。手机之间以及更宽的尺寸，见响应式断点指南。
哪款 iPhone 屏幕最大、哪款最小？
屏幕最大的是 6.9 英寸的 Pro Max 机型：iPhone 16 Pro Max、17 Pro Max 和 18 Pro Max。当前一代中屏幕最小的是 6.1 英寸（iPhone 16e 和 17e）。采用现代全面屏设计的最小 iPhone 是 5.4 英寸的 iPhone 13 mini，而这张表中最小的是 4 英寸的初代 iPhone SE。
用这些尺寸测试网站
要在电脑上以精确的 iPhone 尺寸查看网站，光把窗口变窄是不够的，还需要视口以及像素比和 User Agent。有两种方法：
- Chrome DevTools 设备模式：选择 iPhone 预设，或点击 Edit，用表中的宽度、高度和像素比添加自定义设备。见 Chrome 手机模拟器教程。
- 带 iPhone 预设的手机视图插件。Mobile View Extension 会以对应的 User Agent、屏幕尺寸和像素比，在 iPhone 外框中重新加载标签页；如果缺少某个机型，还可以输入自定义分辨率。
两者都使用 Chrome 引擎渲染。要测试 Safari 特有的行为，请使用 Xcode Simulator 或真机 iPhone，见没有 iPhone 如何在 iPhone 上测试网站。
常见问题
iPhone 17 的视口尺寸是多少？
402 × 874 CSS 像素，像素比为 3，屏幕为 6.3 英寸、分辨率 1206 × 2622。iPhone 17 Pro 和 iPhone 18 Pro 的数值相同。
iPhone 应该按什么屏幕尺寸设计？
设计能在 375 到 440px 宽度之间正常工作的流式布局。设计稿中以 390 或 393px 作为典型的中等尺寸 iPhone，上线前再检查 375 和 440px。
为什么 iPhone 的视口比分辨率小？
为了让文字清晰，每个 CSS 像素在每个方向上用两到三个物理像素来绘制。视口就是分辨率除以这个像素比。详见什么是视口。