当 iPhone 旋转至横屏模式时,其屏幕宽高比会发生变化,这对网页设计、App 开发和多媒体内容展示具有重要影响。 本页面整理了主流 iPhone 型号在横屏状态下的分辨率与比例信息,帮助开发者和设计师更好地进行适配。
| iPhone 型号 | 横屏分辨率(宽 × 高) | 横屏比例(近似) |
|---|---|---|
| iPhone 15 / 14 / 13 / 12 | 844 × 390 | 2.16 : 1 |
| iPhone 15 Pro Max / 14 Pro Max | 932 × 430 | 2.17 : 1 |
| iPhone SE (第3代) | 750 × 360 | 2.08 : 1 |
| iPhone 11 / XR | 896 × 414 | 2.16 : 1 |
| iPhone 8 / 7 / 6s / 6 | 667 × 375 | 1.78 : 1 (16:9) |
| iPhone 8 Plus / 7 Plus / 6s Plus / 6 Plus | 736 × 414 | 1.78 : 1 (16:9) |
设计建议
- 使用响应式布局(如 CSS Flexbox 或 Grid)以适应不同横屏比例。
- 避免固定宽高比的内容容器,优先使用百分比或视口单位(vw/vh)。
- 测试真实设备或使用浏览器开发者工具模拟横屏效果。
- 注意安全区域(Safe Area)在横屏下可能发生变化,尤其是带刘海或灵动岛的机型。