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

}