UIWebview兼容iphoneX的方案

兼容iphoneX其實很簡單，一句代碼就可以了。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover,user-scalable=no">

注意別少了viewport-fit=cover和user-scalable=no

假如少了viewport-fit=cover會影響iphoneX的兼容性

假如少了user-scalable=no會影響android的鍵盤的兼容性

 

這段代碼放在html標籤的head標籤裏，就可以兼容iphoneX。

當然，做了這步之後，底部也要兼容，最簡單的兼容底部和頂部的方法，就是給頂部div加padding-top和給底部div加padding-bottom。參考香蕉雲編yeui框架的兼容代碼，如下：
 

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

    

    .yeui-header{height:84px;}

    .yeui-header .headContent{margin-top:40px;}

    

    .yeui-header ~ .yeui-content{padding-top:84px;}

    

    .yeui-footer{height:60px;}

    .mainMarginBottom{padding-bottom:60px;}

    .commMarginBottom{padding-bottom:20px;}

}

 

 

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {

    

    .yeui-header{height:84px;}

    .yeui-header .headContent{margin-top:40px;}

    

    .yeui-header ~ .yeui-content{padding-top:84px;}

   

    

.yeui-footer{height:60px;}

.mainMarginBottom{padding-bottom:60px;}

 .commMarginBottom{padding-bottom:20px;}

 

}

    

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {

    

    .yeui-header{height:84px;}

    .yeui-header .headContent{margin-top:40px;}

    

    .yeui-header ~ .yeui-content{padding-top:84px;}

    

    .yeui-footer{height:60px;}

    .mainMarginBottom{padding-bottom:60px;}

    

    .commMarginBottom{padding-bottom:20px;}

    

}