H5适配iphoneX底部

H5适配iphoneX底部 两步骤

第一步：设置网页在可视窗口的布局方式

在index.html中设置meta属性,在content下设置关键值 viewport-fit=cover，
使得页面内容完全覆盖整个窗口

<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, 
user-scalable=no, viewport-fit=cover">

注：只有设置了 viewport-fit=cover，才能使用 constant和env 函数

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

第二步：将内容区域限定在安全区域内

如果在有底部tabbar切换的情况下，假设底部tabbar的类名是.bottomBar

1、设置固定定位,将bottom设置为0

.bottomBar{
	width: 100%;
	position: fixed;
	bottom: 0;
	background: #fff;
}

2、判断iphoneX 将 bottomBar 的 padding-bottom 填充到最底部

 @supports (bottom: env(safe-area-inset-bottom)) {
    .bottomBar {
      padding-bottom: env(safe-area-inset-bottom);
      padding-bottom: constant( safe-area-inset-bottom);
    }
  }

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

contain: 可视窗口完全包含网页内容（左图）-- 页面内容显示在safe area内
cover：网页内容完全覆盖可视窗口（右图）-- 页面内容充满屏幕
auto：默认值，跟 contain 表现一致

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

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量，
因为它对应的就是小黑条的高度（横竖屏时值不一样）