一、相信大家有被iPhone X底部黑色横线支配的恐惧
上面我们可以看到，底部的导航栏被一条黑色横线所盖住，那么就很烦。下面我们可以开始进行适配环节
1、首先我们可以用 JS 判断手机环境是不是 iPhone X 代码如下
if (/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)) {
//是iphoneX
console.log('是iphonex')
} else {
//不是iphoneX
console.log('不是iphonex')
}
2、也可以 CSS 判断 代码如下：
媒体查询
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.mint-tabbar, .closeBookList, .BottomProgress {
padding-bottom: 34px !important;
}
}
因为iPhone X 底部横线距离最底部的高度为34px 所以我们增加一个padding-bottom:34px !importan; 提升样式优先权
3、下面写出我的例子：
因为我是在 Vue项目中 用到scss
<style lang="scss" scoped>
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.mint-tabbar, .closeBookList, .BottomProgress {
padding-bottom: px2rem(34) !important
}
}
</style>
这里的 mint-tabbar 是我底部导航栏最父级的 类名，你们要哪部分适配就写哪部分的样式类名