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;}

    

}