H5 网页适配手机底部横杠 env(safe-area-inset-*)

Question

现在的手机，底部都有一个横杠，如果要在底部放置按钮或者显示内容，就会被遮挡，对应的解决方法如下：

1、meta 设置

<meta
  name="viewport"
  content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
/>

上面代码中，重点是 viewport-fit​ 值，具体来说 viewport-fit 是专门为了适配 iPhoneX 而诞生的一个属性，它用于限制网页如何在安全区域内进行展示：

viewport-fit 的取值	效果
contain 默认	viewprot-fit:contain：页面内容显示在 safe area 内
cover	viewport-fit:cover：页面内容充满屏幕

2、env(safe-area-inset-*)​

env(safe-area-inset-*) ​ 是一个具体的数值，就是安全区域的间隔，可以使用 calc 计算，例如下面的代码：

.ctMain {
  height: calc(100% - 1.8rem - constant(safe-area-inset-bottom));
  height: calc(100% - 1.8rem - env(safe-area-inset-bottom));
  margin: 0.75rem;
}

如果是有横杠的手机， env(safe-area-inset-*)​​ ​就是具体的值，如果不是， env(safe-area-inset-*) ​​​ 就是 0，不影响正常的显示。