iPhoneX安全区域与H5引发的兼容适配问题

示例：iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。

一、什么是安全区域？
最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。

幸运的是，在小程序上我们只需要考虑底部的底部Home Indicator上滑指示条。

注意，官方不推荐我们粗暴的将这段区域永久的覆盖，例如压黑边隐藏设备的圆角、刘海、指示条。

同样官方推荐避免将交互元素放在屏幕底部或者角落。 因为从屏幕底部上划被用户激活Home指示条并回到主屏或进入多任务切换，且系统会取消你在这个区域布局的手势。而屏幕角落区域很难触控。

二、预留出Home Indicator指示条
方法一（预留固定的距离）
小程序文档上，会提供我们获取系统信息的API，之后我们要做的是：

判断需要特殊处理的系统型号
添加样式
if(iPhoneX及以上)
    // do something

方法二（ios11 增加新特性）

为了应对刘海屏幕，苹果也给出了响应的策略，如下：

safe-area-inset-left：安全区域距离左边边界距离，一般情况下是 0
safe-area-inset-right：安全区域距离右边边界距离，一般情况下是 0
safe-area-inset-top：安全区域距离顶部边界距离，刘海全屏的时候 top 为 44px
safe-area-inset-bottom：安全区域距离底部边界距离，刘海全屏的条件下是 34px

css 函数 env() 和 constant()

这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持

例如：

兼容前后版本代码,注意顺序不能变

padding-top: 88px;
padding-bottom: 100px;
padding-bottom: calc(100px +  constant(safe-area-inset-bottom));
padding-bottom: calc(100px +  env(safe-area-inset-bottom));

最后：
env 和 constant 只有在 viewport-fit=cover 时候才能生效。

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

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

在H5页面加  viewport-fit=cover 

三、@supports 隔离兼容样式
可以使用 @supports 来隔离兼容样式，当浏览器支持，当然直接写样式里也是可以的

bottom: constant(safe-area-inset-bottom)
bottom: env(safe-area-inset-bottom)
bottom-button类就会新增margin-bottom的样式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
    .bottom-button {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);  
    }
}

四、总结

嵌套H5  

在我们的index.html页面的meta标签 viewport添加一个属性viewport-fit=cover，加样式constant/env(safe-area-inset-bottom)来使用

小程序样式

注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

// 兼容写法
      padding-bottom:constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
      padding-bottom:env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */