要实现底部fixed按钮适配iPhoneX,单对【height】或【padding-bottom】加safe-area-inset-bottom是不行的,至少我试了不行,必须两个一起加
.bottom {
width: 100%;
position: fixed;
bottom: 0;
background-color: #fff;
padding: 10rpx 32rpx 10rpx;
display: flex;
height: calc(100rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
height: calc(100rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
}
因为底部有个fixed按钮,要实现整个body高度不塌陷,可以加上
.bizcircle-container {
box-sizing: border-box;
background-color: #f5f5f5;
&::after {
content: '';
height:calc(108rpx+constant(safe-area-inset-bottom));
height: calc(108rpx+env(safe-area-inset-bottom));
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
display: block;
background-color: #fff;
}
}