适配 IOS 安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。

产生安全区域的原因：

造成这个问题的主要原因是 iphoneX 之后在屏幕上方出现了刘海屏，在屏幕下方加了一条小黑条。

适配安全区域的方法：

苹果官方提供了两个 CSS 的函数和四个预定义的常量用来适配 IOS 的安全区域。推荐使用。

1. constant()：在 IOS11.2 系统之前使用。

   constant() 在 IOS11.2 系统之后被废弃了。

2. env() ：在 IOS11.2 系统之后使用。
3. safe-area-inset-top：安全区域距离顶部边界距离，状态栏+导航栏大约为 88px。
4. safe-area-inset-left：安全区域距离左边边界距离，竖屏时为 0。
5. safe-area-inset-right：安全区域距离右边边界距离，竖屏时为 0。
6. safe-area-inset-bottom：安全区域距离底部边界距离，大约高度为 34px。
   

<!-- 需要首先设置 viewport-fit=cover -->
<meta name="viewport" content="viewport-fit=cover" />

/* constant 和 env 都写上 */
body{
    /* 兼容 iOS < 11.2 */
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}