iPhoneX安全区域适配

网上方案有很多，这里只记录个人最喜欢的一种：苹果官方推出的css函数：constant()、env()

其他方案参考转载链接：https://juejin.im/post/6844904106088202254

使用前提

网页设置 viewport-fit=cover 才生效（代码如下）。

在小程序中，这两个函数可以直接用，所以推测小程序中 viewport-fit 值为 cover。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

变量说明

safe-area-inset-left      左边安全距离
safe-area-inset-right     右边安全距离
safe-area-inset-top       顶部安全距离
safe-area-inset-bottom    底部安全距离

使用

/* 以距离底部100px为例 */
.bottom-btn {
    margin-bottom: calc(100px + constant(safe-area-inset-bottom));    /*兼容 IOS<11.2*/
    margin-bottom: calc(100px + env(safe-area-inset-bottom));    /*兼容 IOS>11.2*/
}

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