H5页面全面屏设置底部安全距离_h5 底部安全距离

在head中添加：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />

meta标签加入viewport-fit=cover

使用：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    /* 如果浏览器支持安全区域底部距离，
       则可以为需要吸底的元素单独规定样式，
       如果该 class 还有其它样式，要将本段代码放在其它样式后面！
    */
    .bottom{
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        background-color:  #fff;//安全距离的背景色
    }
}