目录
问题描述
苹果手机底部的小黑条,在pwa环境下会遮挡底部信息,所以要对底部小黑条进行处理,情况如下所示
解决方案
首先index.html yaozengjai meta标签,viewport-fit=cover
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
然后给bottom,改变赋值env()和constant()
env一定要在constant前面
.bottom-first-loan {
bottom: calc(55px +constant(safe-area-inset-bottom);
bottom: calc(55px + env(safe-area-inset-bottom));
// bottom: 55px !important;
}
同样的,也可以给高度,内边距等其他值赋值使用
padding: 56rpx 0 calc(16px +constant(safe-area-inset-bottom);
padding: 56rpx 0 calc(16px + env(safe-area-inset-bottom));
其他属性
- safe-area-inset-left：安全区域距离左边边界的距离
- safe-area-inset-right：安全区域距离右边边界的距离
- safe-area-inset-top：安全区域距离顶部边界的距离
- safe-area-inset-bottom：安全区域距离底部边界的距离
使用方式都一样,这里就不过多描述了,不过一般只用到顶部安全距离和底部安全距离
