一、苹果手机屏幕比例到底是多少？

从初代 iPhone 到最新的 iPhone 15 Pro Max，苹果一共用过四种主流屏幕比例：

• 3:2：2007-2011 年，iPhone 3GS 及更早机型。
• 16:9：2012-2017 年，iPhone 5/5s/SE 之一代、iPhone 6/6s/7/8。
• 19.5:9：2017-2022 年，iPhone X/XS/11/12/13/14 全系。
• 19.5:9 加长版：2022 年起，iPhone 14 Pro/15 Pro Max 的灵动岛区域把可用高度再拉长约 2 mm。

二、为什么苹果坚持 19.5:9？

苹果并非随意选择 19.5:9，而是综合了握持手感、内容显示、Face ID 模组空间三大因素：

1. 握持手感：19.5:9 让机身更窄，单手握持拇指可覆盖 90% 区域。
2. 内容显示：主流视频平台 16:9 内容上下留黑边，19.5:9 让黑边更窄，观感更沉浸。
3. Face ID 模组：TrueDepth 摄像头阵列需要额外纵向空间，19.5:9 正好容纳。

三、开发者如何适配不同比例？

1. 使用 Auto Layout 而非固定像素

问：为什么 375×812 的设计稿在 iPhone 15 Pro Max 上被拉伸？
答：因为你用了绝对像素。正确做法是：

• 用 leading/trailing 约束替代固定左右边距。
• 用 safeAreaLayoutGuide 避开刘海与灵动岛。

2. Launch Screen 必须包含 19.5:9 切片

App Store 审核规则：若 Launch Screen 缺失 19.5:9 比例，会被拒审。

3. 视频与图片的安全区域

19.5:9 机型顶部44 pt、底部34 pt为系统保留区，内容需避开。

四、网页设计师的 3 个实战技巧

技巧一：使用 CSS env() 函数

.hero {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

技巧二：媒体查询精准匹配

@media (device-aspect-ratio: 19.5/9) {
  .video-wrapper { aspect-ratio: 19.5/9; }
}

技巧三：避免使用 100vh

iOS Safari 的 100vh 会包含地址栏与工具栏，导致底部按钮被遮挡。改用：

height: 100dvh;

五、常见疑问一次说清

Q：iPhone SE 第三代还用 16:9，会影响 App 布局吗？
A：不会。Xcode 的 Size Classes 把 16:9 与 19.5:9 都归类为 compact width + regular height，只要用 Auto Layout 即可自动适配。

Q：横屏游戏如何兼顾两种比例？
A：把操作按钮放在左右 10% 区域，中间 80% 为核心画面，16:9 与 19.5:9 都能完整显示。

Q：为什么有些网站在 iPhone 14 Pro 上出现白边？
A：未设置 viewport-fit=cover，浏览器默认留安全边距。

六、未来趋势：20:9 会来吗？

供应链消息指出，苹果测试过 20:9 原型机，但因横向握持时拇指难以触及顶部按钮而搁置。短期内 19.5:9 仍是 iPhone 的黄金比例。

七、一张速查表带走