奇思乎乎乎 iPhone 16e · 17 系列 · Air - 一束网址,折射万屏
100%

输入网址,立刻开始预览

预设:
自定义:

iPhone 16e / 17 / Air 尺寸对比

iPhone 16e、17 和 17 Air 是 2025-2026 年苹果的三条产品线,屏幕规格和安全区都不一样。如果你的页面只测了其中一款,上线后很可能在另外两款上错位。

屏幕尺寸对比:

  • iPhone 16e:6.1 英寸,393 × 852 pt,刘海屏,顶部安全区 47pt
  • iPhone 17:6.3 英寸,402 × 874 pt,灵动岛,顶部安全区 59pt
  • iPhone 17 Air:6.6 英寸,430 × 932 pt,灵动岛,顶部安全区 59pt,机身仅 5.5mm

三个关键差异:

第一,顶部安全区从 47pt 变到 59pt。16e 是刘海,17 和 Air 是灵动岛。相差 12pt,会导致固定定位的顶部导航错位。

第二,宽度从 393 变到 430。17 Air 比 16e 宽了 37pt(约 9%)。如果页面有固定宽度容器或按 393 设计的栅格,在 17 Air 上会拉伸变形或留白。

第三,长宽比不同。16e 是 19.5:9,17 和 17 Air 是 19.6:9。做全屏沉浸式页面时,这个比例的细微差异会导致背景图裁切位置不同。

在下方预览器输入你的网址,三款机型并排对比,一眼看出哪一款上有问题。

常见问题

iPhone 16e 和 iPhone 17 的屏幕宽度一样吗?
不一样。16e 是 393pt,17 是 402pt,17 Air 是 430pt。三者都不等宽,做响应式时要按最宽的 430pt 设计上限,最窄的 393pt 设计下限。
为什么 iPhone 16e 上正常,iPhone 17 上顶部错位?
因为顶部安全区不同:16e 是 47pt(刘海),17 是 59pt(灵动岛)。如果你的导航栏写死了 47px 高度,在 17 上会被灵动岛覆盖 12px。
iPhone 17 Air 有多薄?会影响布局吗?
17 Air 机身仅 5.5mm。从 H5 角度看,机身厚度不影响布局,但它 430pt 的屏幕宽度是三款里最宽的,适配时要注意。
三款机型用同一份 viewport 设置可以吗?
可以,只要 viewport meta 里加上 viewport-fit=cover,三款机型都会正确延伸页面。区别只在 CSS 里 env(safe-area-inset-*) 的返回值不同。

相关工具