Web移动端---iPhone X适配（底部栏黑横线）

一、相信大家有被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 是我底部导航栏最父级的 类名，你们要哪部分适配就写哪部分的样式类名