了解不同 iPhone 型号在横屏模式下的屏幕比例与适配策略
当 iPhone 从竖屏旋转为横屏时，其逻辑分辨率（即 CSS 像素）会发生变化。虽然物理像素不变，但网页和 App 的布局需根据新的宽高比进行适配。
横屏比例 = 横屏宽度 / 横屏高度（以逻辑像素计算）。
| 机型 | 竖屏逻辑分辨率 | 横屏逻辑分辨率 | 横屏比例（宽:高） |
|---|---|---|---|
| iPhone SE (第1-3代) | 375 × 667 | 667 × 375 | ≈ 1.78:1 (16:9) |
| iPhone 8 / 7 / 6s / 6 | 375 × 667 | 667 × 375 | ≈ 1.78:1 |
| iPhone 8 Plus / 7 Plus | 414 × 736 | 736 × 414 | ≈ 1.78:1 |
| iPhone X / XS / 11 Pro | 375 × 812 | 812 × 375 | ≈ 2.17:1 |
| iPhone XR / 11 | 414 × 896 | 896 × 414 | ≈ 2.16:1 |
| iPhone 12 / 13 / 14 / 15 | 390 × 844 | 844 × 390 | ≈ 2.16:1 |
| iPhone 12 Pro Max / 13 Pro Max / 14 Plus / 15 Plus | 428 × 926 | 926 × 428 | ≈ 2.16:1 |
| iPhone 14 Pro / 15 Pro | 393 × 852 | 852 × 393 | ≈ 2.17:1 |
| iPhone 14 Pro Max / 15 Pro Max | 430 × 932 | 932 × 430 | ≈ 2.17:1 |
在响应式网页设计中，应使用 CSS 媒体查询检测横屏状态：
@media screen and (orientation: landscape) {
/* 横屏样式 */
}
注意：部分带刘海或灵动岛的 iPhone 在横屏时，安全区域（safe area）会发生变化，建议使用 env(safe-area-inset-*) 进行布局保护。