在H5开发过程中，iphone x以上型号的手机通常都有底部刘海适配的问题，本文再简单描述下该问题的解决方案以及常见的坑。
一、解决方案
入口html在viewport中新增viewport-fit=cover
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover">
适配的页面css中
padding-bottom: constant(safe-area-inset-bottom); // ios < 11.2
padding-bottom: env(safe-area-inset-bottom); // ios >= 11.2
在需要适配的容器中新增上述属性，将刘海撑起，具体使用什么样式根据具体场景而定，不局限使用padding-bottom。
二、常见的坑
通常项目打包时，会将相同的样式去重，如上解决方案可能会被webpack打包时删除padding-bottom: constant(safe-area-inset-bottom);导致部分版本系统不兼容，因此，不能同时加在一个类下。
解决方案：
使用伪类或者将其中一个属性设置到其他也能达到效果的类下，
