移动端刘海屏适配

问题：ios刘海屏手机屏幕内容会被限制在一定区域内，导致左右两侧会出现空白。如图：

解决方法1:

如果网站背景为纯色，最好和简单的解决方案是在body上设置background-color。

解决方法2:

如果网站使用渐变或者图像作为背景，直接设置background-color可能不行。在最新版的ios中，apple添加了viewport-fit属性

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

效果如图：

显然不是我们想要的结果，为了保证在内容显示在安全区内，我们可以设置一些padding、margin或绝对位置值

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

效果如下图：

注意⚠️

constant已从ios11.2中删除，以支持标准化的env。