移动端H5-iPhone安全距离适配

安全区域？

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

也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。
更详细说明，参考文档：Human Interface Guidelines - iPhoneX

viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

• contain: 可视窗口完全包含网页内容（左图）
• cover：网页内容完全覆盖可视窗口（右图）
• auto：默认值，跟 contain 表现一致

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

更详细说明，参考文档：viewport-fit-descriptor

env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离
  这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。
需要做向后兼容，像这样：

padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */