手把手教你如何适配 iPhone X

iPhone X 适配

我列出了 iPhone X 的三种分辨率的尺寸：375x812pt（1x），750x1624px（2x），1125×2436（3x

）
如果你的团队使用的是750×1334（2x）的设计稿，你在适配 iPhone X 的时候可以采用 iPhone

X_2x的图来适配，这样就省去了缩放这一步骤，而且开发使用的是逻辑像素即375pt × 812pt来做

iPhone X 的设计还原的，所以你这样设计 iPhone X 是不会影响开发的，因为750x1624px（2x）还

原到1x 还是375x812pt，相信你已经明白了。

iPhone X安全区域问题

如果你用1x 来做设计稿：iPhone X 安全区域是375x734pt
如果你用2x 来做设计稿：iPhone X 安全区域是750x1468px

如何计算 iPhone X 安全区域

1x 的 iPhone X 安全区域：其实安全区域=812pt—Status Bar (44pt) Home Indicator（34pt）
2x 的 iPhone X 安全区域：其实安全区域=1624px—Status Bar (88px) Home Indicator（68px）
iPhone X 实际案例适配

在开始之前，我们先看一下其他 app 怎么适配之前的 iOS 设备的，我们可以知道头部区域采用了等

比例的方法来适配，因为只有这样才能保证640×1136上面能够放得下相应的内容。其他的只需要放

置相应的切图即可。

一开始以为头部适配很简单就没有特别在意，我们一开始也采用了等比例适配，后来发现没有必要，

因为 640×1136 上基本可以显示完全。然后我们就开始适配 iPhone X 了，后来开发通过 Xcode 模

拟出 iPhone X 的适配结果，我发现问题好像出现了，所以我陷入了沉思。是不是我方法不对？后来

跟我们的用药助手 iOS 开发讨论了以后，发现原来导航栏的高度不是简单的200pt 解决的，这里我

们采用的是固定高度的做法而不是采用等比例的做法，一般这块区域可以有2种做法：等比例和固定

高度，看你页面的构成，如果页面内容较少可以采用固定高度的做法。不然的话可能在小屏幕手机有

些内容放不下。

在没有 iPhone X 之前，固定高度做法：可以直接整体蓝色区域高度给200pt 解决问题，不用考虑导

航栏问题~

但是 iPhone X 出来了，这样的做法就会行不通，因为 iPhone X 的导航栏高度是44pt 44pt=88pt，

比 iPhone 6的导航栏（64pt）高了24pt，所以正确适配 iPhone X 的做法应该是导航栏区域高度

（88pt） （200pt-64pt）=224pt，相信大家也知道了其实说白了就是 Status Bar 高度多了24pt，

所以224pt 比200pt 大了24pt。