像左图是未兼容的效果,右图是兼容后的效果,意味着并不是所有页面都需要做这种兼容,只是某些页面底部有fixed属性的元素,这种情况需要留安全距离
先直接看代码:
留出iphonex iphone11底部的横线距离
我的项目中使用了antd-mobile的tabBar,所以需要修改以下两个原素的高度,你可以根据自己项目来加上安全距离,留出间距
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.am-tab-bar-box, .am-tab-bar-box .am-tab-bar-bar {
height: constant(60px + env(safe-area-inset-bottom)); // tabBar原高度(60px改成你项目自己的值)+安全距离,兼容 iOS