iPhone X 像素详解

iPhone X 是苹果公司于 2017 年发布的一款具有划时代意义的智能手机，其全面屏设计和 Face ID 技术引领了后续多代 iPhone 的发展方向。对于 UI/UX 设计师和前端开发者而言，了解 iPhone X 的像素参数至关重要。

核心屏幕参数

• 物理分辨率（像素）：1125 × 2436 像素
• 逻辑分辨率（点）：375 × 812 pt
• 像素密度（PPI）：458 PPI
• 屏幕尺寸：5.8 英寸（对角线）
• 屏幕比例：19.5:9
• 缩放因子（Scale Factor）：@3x

UI 设计注意事项

由于 iPhone X 引入了“刘海屏”和底部手势操作区域，在进行界面设计时需特别注意以下几点：

• 避免将关键内容放置在顶部状态栏或底部 Home Indicator 区域；
• 使用安全区域（Safe Area）布局，确保内容不被遮挡；
• 在 Sketch、Figma 或 Adobe XD 中使用78TP模板进行设计；
• 开发时可通过 CSS 的 env(safe-area-inset-*) 属性适配安全区域。

适配建议

对于 Web 开发者，建议在 viewport meta 标签中启用 viewport-fit=cover，并结合媒体查询针对 iPhone X 进行优化：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">