浅析iPhone X的适配

图片来源于苹果官网

首先我们习惯用iPhone7的375*667pt为设计稿向上适配iPhone7puls的屏幕。但是iPhone X的出现看似要打破这个局面，其实不然。

iPhone X的屏幕分辨率是1125*2436px换算成三倍图则为375*812pt（@3x）相比iPhone7的375*667pt只高了145pt。所以我们可以把iPhone X简单看成iPhone7的“加长版”。

加长版的iPhone7

iPhone X算是一个“奇葩”屏设计了，去掉了原有的home键又增加了“齐刘海”的状态栏设计。根据苹果官方给出的设计规范。Navigation bar和Bottom bar将做出较大的改变来适配这个“奇葩”屏幕的设计。

iPhone7和X的区别

官方给出的设计规范就是Navigation bar增加到44pt即给“齐刘海”增加了26pt，而Bottom bar以下则增加了34pt。剩下的85pt则是多余出来的位置。

当然这块1125*2436的“异形屏”并不是全部区域都是可用的，实际上根据官方给出的规范说明，除去全屏显示体验的情况下，存在着设计的“安全区”。

竖屏安全区域

横屏安全区域

这样是适配对iPhone X的影响并不会太大。可以正常的从375*667pt的@3x适配到iPhone X。但是部分全屏设计页面还是得做细节的调整。包括全面显示的页面、启动页和引导页等等

部分页面重新排版设计

所以对于适配iPhone X，只需要正常用iPhone7适配7plus的方式做@3x图适配就可以了。