iphoneX等移动端设备底部安全区域适配

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

请看下面的示例：

以上就是我们要解决的问题，

其实解决起来还是很简单的，先说一下解决方案，然后再阐述一下为什么要这样做:

第一步：在我们的index.html页面的meta标签 viewport添加一个属性viewport-fit=cover，请看的代码（我是用vue开发的移动端网页）

这一步必不可少，否则接下来的添加也是不生效的，注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

第二步：在我们的css样式里面需要添加的元素上面添加padding属性并赋值为env() 和 constant()

请看代码示例：

综上所述，ihoneX底部安全适配基本上就解决了，接下来说一下为什么要这样做：

为什么要做适配：（还不是为了不让设计师和丧心产品汪找我们的麻烦。。。）

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

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

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

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

更详细说明，参考文档：viewport-fit-descriptor

其实要想要适配的属性有很多，但是我只接收到设计汪给我提出的iphoneX底部适配吗。。。

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，如下示例：

更详细说明，参考文档：Designing Websites for iPhone X

同理我们也可以使用占位元素来适配iphoneX底部安全区域，类似vant-ui给出的方案，

下面给出一个样式仅供参考

总体上适配就完成了，请看适配后的图片展示：

下面的是安卓的示例：

接下来的是iphoneX的适配案例：