iPhone X 的 Web 适配解决方案：

《关于H5页面在iPhoneX适配》
http://www.cnblogs.com/lolDragon/p/7795174.html

《iPhone X适配没那么复杂，但也不是看上去这么简单》
http://www.uisdc.com/iphone-x-adaptive

《iPhone X的Web设计》
https://www.w3cplus.com/mobile/designing-websites-for-iphone-x.html

《 iPhone X的缺口和CSS 》
https://www.cnblogs.com/sunshq/p/7716792.html

《 iPhone X 适配手机端 H5 页面通用解决方案》
https://www.cnblogs.com/zhangruiqi/p/7831019.html

例子：

<style type=”text/css”>
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
html {
height: 100%;
box-sizing: border-box;
padding-bottom: 34px;
&:after {
content: ”;
z-index: 9998;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 34px;
background: #ffffff;
}
}
}
</style>