H5+微信小程序 —— 解决iPhoneX全面屏底部小黑条遮挡的问题

在iPhoneX全面屏手机上，屏幕底部有一条小黑条遮挡页面的显示。

为了解决这个问题，我们可以使用iOS11 的新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，它有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。

所以，在H5的页面中，我们必须在HTML头部设置网页在可视窗口的布局方式，微信小程序似乎默认就是viewport-fit=cover，无需我们自己手动设置

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

然后在样式里可以这样使用 safe-area-inset-bottom

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .tabbar{
        bottom: calc(constant(safe-area-inset-bottom) + 275rpx); /* 兼容 iOS < 11.2 */
        bottom: calc(env(safe-area-inset-bottom) + 275rpx); /* 兼容 iOS >= 11.2 */
    }
}

constant() 在 iOS11.2 之后就不能使用