iPhone 13 屏幕宽度详解

iPhone 13 是苹果公司于 2021 年推出的热门智能手机，其屏幕尺寸和分辨率对网页设计、App 开发以及用户体验有着重要影响。本文将详细介绍 iPhone 13 的物理与逻辑屏幕宽度，并提供适配建议。

📱 基础参数

项目	数值
屏幕类型	Super Retina XDR OLED
物理分辨率（像素）	1170 × 2532
逻辑分辨率（点）	390 × 844
屏幕宽度（物理）	1170 像素
屏幕宽度（CSS / 逻辑）	390px
设备像素比（DPR）	3
屏幕尺寸（对角线）	6.1 英寸

💡 为什么“逻辑宽度”是 390px？

虽然 iPhone 13 的物理像素宽度为 1170px，但 iOS 使用“点（points）”作为布局单位。由于设备像素比（Device Pixel Ratio）为 3，因此：

逻辑宽度 = 物理宽度 ÷ DPR = 1170 ÷ 3 = 390px

在 Web 开发中，CSS 像素基于逻辑像素，所以你的网页在 iPhone 13 上默认视口宽度为 390px。

🛠️ 网页适配建议

• 始终在 HTML 中包含视口 meta 标签：
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
• 使用响应式布局（如 Flexbox 或 Grid）确保内容在 390px 宽度下正常显示。
• 媒体查询示例：

  @media (max-width: 390px) {
    /* iPhone 13 及类似设备样式 */
  }

• 避免固定宽度大于 390px 的容器，否则会导致横向滚动。

🔍 如何检测当前设备宽度？

你可以使用以下 JavaScript 代码在浏览器中查看当前视口宽度：

console.log('视口宽度:', window.innerWidth + 'px');

在 iPhone 13 Safari 中，通常会输出 390（竖屏）或 844（横屏）。