css iphone安全底部_css 安全距离

css适配iphone安全底部

1.在我们的index.html页面的meta标签 viewport添加一个属性viewport-fit=cover，h5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。

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

2.样式表里配置

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

因为是这是安全底部，所以配置safe-area-inset-bottom

    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    // 先constant再env
1
2
3

iphone手机总是有各种各样的兼容性问题，这也算其中之一吧