适配iphonex

在 iPhoneX发布后，许多厂商相继推出了具有边缘屏幕的手机。
这些手机和普通手机在外观上无外乎做了三个改动：圆角（ corners）、刘海（ sensor housing）和小黑条（ HomeIndicator）。为了适配这些手机，安全区域这个概念变诞生了：安全区域就是一个不受上面三个效果的可视窗口范围。
为了保证页面的显示效果，我们必须把页面限制在安全范围内，但是不影响整体效果。

1.viewport-fit
viewport-fit是专门基于iphonex诞生的一个属性，用于现在网页如何让在安全区域进行显示

微信图片_20190520163812.jpg
contain: 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
默认情况下或者设置为 auto和 contain效果相同。

2.env、constant
我们需要将顶部和底部合理的摆放在安全区域内， iOS11新增了两个 CSS函数 env、constant，用于设定安全区域与边界的距离。
函数内部可以是四个常量：
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
注意：我们必须指定 viweport-fit后才能使用这两个函数：
<meta name="viewport" content="viewport-fit=cover">
constant在 iOS<11.2的版本中生效， env在 iOS>=11.2的版本中生效，这意味着我们往往要同时设置他们，将页面限制在安全区域内：

body {
  padding-bottom: constant(safe-area-inset-bottom),
  padding-bottom: env(safe-area-inset-bottom)
}

当使用底部固定导航栏时，要为他们设置相应的padding值：

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom)
}