问题的描述:
env() 和 constant()
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
可以通过加内边距 padding 扩展高度:
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
或者通过计算函数 calc 覆盖原来高度:
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
解决方案
position: fixed;
bottom: 0;
width: 100%;
display: flex;
height: calc(96rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
height: calc(96rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
background: #fff;
border-top: 1rpx solid #eaeef1;
z-index: 99;
padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
注意 constant与env顺序不能改变,先constant再env