UIWebview compatible with iphoneX solution

Compatible with iphoneX is actually very simple, just one sentence of code.

<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的键盘的兼容性

 

This code is placed in the head tag of the html tag, which is compatible with iphoneX.

Of course, after this step, the bottom must be compatible. The easiest way to be compatible with the bottom and top is to add padding-top to the top div and padding-bottom to the bottom div. Refer to the compatible code of yeui framework compiled by Banana Cloud, as follows:
 

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

    

}