H5解决Iphone底部刘海问题

在H5开发过程当中，iphone x以上型号的手机一般都有底部刘海适配的问题，本文再简单描述下该问题的解决方案以及常见的坑。

1、解决方案

入口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。

2、常见的坑

一般项目打包时，会将相同的样式去重，如上解决方案可能会被webpack打包时删除padding-bottom: constant(safe-area-inset-bottom);致使部分版本系统不兼容，所以，不能同时加在一个类下。

解决方案：

使用伪类或者将其中一个属性设置到其余也能达到效果的类下，