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

 1
　　/*媒体查询的方式 添加class名即可*/
 @media only screen and (device-width:375px) and (decive-height:812px) and (-webkit-device-pixel-ratio:3){
 2   .content-bottom{
 3       padding-bottom:34px !important;
 4      background-color: #fff !important
 5   }  
 6 }
 7 
 8 @media only screen and (device-width:375px) and (decive-height:812px) and (-webkit-device-pixel-ratio:2){
 9   .content-bottom{
10       padding-bottom:34px !important;
11      background-color: #fff !important
12   }  
13 }
14 
15 @media only screen and (device-width:414px) and (decive-height:896px) and (-webkit-device-pixel-ratio:3){
16   .content-bottom{
17       padding-bottom:34px !important;
18      background-color: #fff !important
19   }  
20 }
21 
22 @media only screen and (device-width:414px) and (decive-height:896px) and (-webkit-device-pixel-ratio:2){
23   .content-bottom{
24       padding-bottom:34px !important;
25      background-color: #fff !important
26   }  
27 }
/*通过查询手机型号来进行适配*/
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






            

            
posted @ 
2020-07-13 14:06 
沁猿春 
阅读(783) 
评论(0) 
编辑 
收藏 
举报