解决苹果手机底部横杠兼容问题

 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