iPhone 8 分辨率详解

📱 基本信息

iPhone 8 是苹果公司于 2017 年 9 月发布的智能手机，搭载了经典的 4.7 英寸 Retina HD 显示屏，至今仍被广泛使用。了解其屏幕参数对网页设计、APP 开发和图像适配至关重要。

📏 屏幕规格一览

💻 开发与设计建议

针对 iPhone 8 进行响应式网页或应用开发时，请注意以下几点：

• 使用 viewport meta 标签：确保页面在移动设备上正确缩放。

  <meta name="viewport" content="width=device-width, initial-scale=1">

• CSS 布局应基于 375px 宽度进行设计（即逻辑宽度）。
• 图片资源建议提供 @2x 版本（例如：icon@2x.png），以匹配 DPR=2 的屏幕。
• 避免固定像素宽高，优先使用百分比、rem、vw/vh 或弹性布局（Flexbox/Grid）。
• 测试工具推荐：Safari 开发者工具、Xcode 模拟器、或真机调试。

🔍 常见问题

1. iPhone 8 和 iPhone 8 Plus 分辨率一样吗？
   不同。iPhone 8 Plus 为 1080×1920 物理像素（逻辑 414×736 pt，DPR=3）。
2. 为什么 CSS 中写 375px 却占满屏幕？
   因为浏览器使用的是逻辑像素（point），实际渲染会乘以设备像素比（2倍）。
3. 需要为 iPhone 8 单独做适配吗？
   若已采用响应式设计，通常无需单独适配；但需确保在 375px 宽度下体验良好。