手把手教你如何适配 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。