iphoneX移动端适配问题

iphoneX移动端适配问题

前言
iPhoneX 取消了物理按键，改为刘海屏，这一改动导致网页出现了适配问题。对于网页而言，顶部刘海部位的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。

下面是整理的移动端适配方案，希望对大家有所帮助，处理前后效果如图：

适配之前需要了解的新知识
安全区域
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：

也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。

更详细说明，参考文档：Human Interface Guidelines - iPhoneX

viewport-fit
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，适配iphoneX和ios11以上的系统，用于设置网页在可视窗口的布局方式，可设置三个值：