IphoneX 的适配，关键在于怎么让页面适应 “齐刘海”、底部操作区域以及大圆角问题。
IphoneX 相对于其他手机，不同之处在于设备虽同样都是一个屏幕，但其实被分为了好几个模块，具体见下图：
我们正常的一个网页，搬到X上来，效果是 内容只显示在 Safe Area 安全区域，非安全区域部分没有网内容，也就是说头部和底部会出现白块，怎么处理？
解决办法
1. 给body加一个 background-color
为什么要加 background-color？有什么用？ 注意到我们刚说到的 头部和底部会出现白块，其实说是白色其实并不准确，因为这个颜色其实来自于 body 的背景色。另外，我们上拉或下拉内容时会显示网页下方的内容及颜色，其实也是body的背景颜色。所以如果你想修改这两个效果，就可以设置一下 body 的背景色。
2. 添加 viewport-fit = cover 的 <meta> 标签
这一步极为关键。先看一下结果：
为什么说极为关键？ iphoneX 的主要问题就是除了安全区域外，其他地方不能显示网页内容，而它就是为解决这个问题而量身定制的。当设置了以上内容后，头部和底部就能开放给网页显示内容。
但是用了之后你会发现，区域是开放了，但是内容（常为导航栏）却因为“齐刘海”而被遮挡住了部分内容，并且，发现原本设置的100%的高度并没有占用全部高度空间，怎么办？
对于头部的高度和底部的高度，其实是有匹配值的，如下图：
所以，我们有如下方案处理：
1. 修改我们导航栏的高度，为原本高度加上safe-area-inset-top 的高度，也就是44px；具体可以这么写：
height: calc(navHeight + 44px);，并且重新设置一下导航栏上文案的位置。
2. IOS 11的浏览器chromium内核提供了以下内容，也就是我们上图标注的那几个值：
-
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
怎么用呢？很简单：
| body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0 padding-right: constant(safe-area-inset-right); //如果未竖屏时为0 padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px } |
