你应该知道H5的iPhoneX适配

随着全面屏的出现，对于屏幕可视区的就出现了各式各样的情况，前端人员在开发移动端的时候就要多考虑一下兼容适配了，让我们看看iPhoneX的适配应该怎样做吧

iPhoneX适配

//1.viewport meta 标签增加属性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
//2.body元素增加样式
body {
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
}
//3.如有fixed底部的元素，也增加上面样式
xxx {
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
 background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况
}
复制代码

至此，在开发移动端H5时候就完美搞定iPhoneX的适配了

转载于:https://juejin.im/post/5b5ac32851882561b75a635a