全面了解 iPhone X 的屏幕参数、设计要点与开发适配技巧
iPhone X 是苹果公司于 2017 年发布的旗舰机型,首次引入了“全面屏”设计和 OLED 显示屏。 其屏幕分辨率为 1125 × 2436 像素,采用 Super Retina HD 显示技术。
| 参数 | 数值 |
|---|---|
| 物理分辨率 | 1125 × 2436 像素 |
| 逻辑分辨率(CSS 像素) | 375 × 812 pt |
| 屏幕尺寸 | 5.8 英寸(对角线) |
| 像素密度(PPI) | 458 PPI |
| 屏幕比例 | 19.5 : 9 |
| 显示技术 | OLED / Super Retina HD |
在 iOS 开发中,使用的是“点”(points)而非物理像素。iPhone X 的设备像素比(Device Pixel Ratio)为 3, 因此:
这意味着网页或 App 的布局应以 375×812 作为基准进行设计,系统会自动将 1pt 渲染为 3×3 物理像素。
在响应式网页设计中,需特别注意以下几点:
<meta name="viewport" content="width=device-width, initial-scale=1">
header {
padding-top: env(safe-area-inset-top);
}
footer {
padding-bottom: env(safe-area-inset-bottom);
}
UI/UX 设计师在为 iPhone X 及后续全面屏设备设计时,应: