【报Bug】底部安全距离env(safe-area-inset-bottom)，编译到Android机无法识别

分类：uni-app

详细问题描述

示例一：自定义tabBar

page{
width: 100%;
height: 50px;
position: fixed;
botttom: env(safe-area-inset-bottom);
background-color: #108ee9;
}

编译到IOS端，正常显示为：固定在底部安全距离之上的tab条
编译到Android机器，fixed布局失效，悬浮在顶部

示例二：自定义全屏遮罩

page{
width: 100%;
position: fixed;
top: 0;
botttom: env(safe-area-inset-bottom);
background-color: rgba(0,0,0,0.3);
}

编译到IOS端，正常显示为：遮盖除底部安全距离之外的区域，黑色半透明遮罩层
编译到Android机器，没掉，需改为bottom: 0，方可正常显示

【问题】
既然此项安全距离无法通用，条件判断又只能APP-PLUS，无法细致区分Android和IOS，难不成要先写安全距离打包一套到IOS，然后把所有env(safe-area-inset-bottom)再替换为0，再打包到Android？？？

2019-11-28 18:03 负责人:无分享

css样式支持程度根和浏览器有关。env 已经成为css标准，已有部分安卓支持（iOS也有部分不支持）不能统一替换。
解决方案，写好默认样式。

申城法斗 (作者)

打包成app的，并非H5。那这么说的话，env(safe-area-inset-bottom)完全就是不可用的，打包之后无法确定客户用的是什么手机安装app

2019-11-29 09:55
申城法斗 (作者)

默认样式指的是什么，不做env(safe-area-inset-bottom)适配了吗

2019-11-29 09:56
DCloud_UNI_GSQ

回复申城法斗: 已给你一段参考

2019-11-29 14:26

ilg365 - 一时

默认样式给tabbar写样式？

.tabbar{
xxxx?
}

申城法斗 (作者)

没太理解你的意思，我是原生tabbar无法被uni-popup遮盖，不想用子窗体，所以考虑自定义，才用到安全距离

2019-11-29 10:12

关于env的使用，给你个参考：

height: calc(100% - 94px);  
height: calc(100% - 94px - constant(safe-area-inset-bottom));  
height: calc(100% - 94px - env(safe-area-inset-bottom));

5***@qq.com

请问nvue支持吗？好像会报ERROR: property value calc(210upx + constant(safe-area-inset-bottom)) is not supported for height

2020-05-29 10:43
DCloud_UNI_GSQ

回复 5***@qq.com: nvue 用 js 获取

2020-06-01 14:55
thinkive

回复 DCloud_UNI_GSQ: nvue里面写法，能发下参考下吗？

2021-01-25 11:03
DCloud_UNI_GSQ

回复 thinkive: uni.getSystemInfo

2021-01-25 11:03
1***@qq.com

这个默认样式是每个页面都要写吗

2021-03-02 16:02

该问题目前已经被锁定, 无法添加新回复