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 是我底部導航欄最父級的 類名，你們要哪部分適配就寫哪部分的樣式類名