解決蘋果手機底部橫杠兼容問題

 1
　　/*媒體查詢的方式 添加class名即可*/
 @media only screen and (device-width:375px) and (decive-height:812px) and (-webkit-device-pixel-ratio:3){
  .content-bottom{
      padding-bottom:34px !important;
     background-color: #fff !important
  }  
}

@media only screen and (device-width:375px) and (decive-height:812px) and (-webkit-device-pixel-ratio:2){
  .content-bottom{
      padding-bottom:34px !important;
     background-color: #fff !important
  }  
}

@media only screen and (device-width:414px) and (decive-height:896px) and (-webkit-device-pixel-ratio:3){
  .content-bottom{
      padding-bottom:34px !important;
     background-color: #fff !important
  }  
}

@media only screen and (device-width:414px) and (decive-height:896px) and (-webkit-device-pixel-ratio:2){
  .content-bottom{
      padding-bottom:34px !important;
     background-color: #fff !important
  }  
}

/*通過查詢手機型號來進行適配*/
if (/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)) {
//是iphoneX
console.log('是iphonex')
} else {
//不是iphoneX
console.log('不是iphonex')
}

　　

 詳解：https://blog.csdn.net/dx18520548758/article/details/80010358