VantUI关于IphoneX等机型的底部适配

使用Vue+Vant UI开发H5项目，在IphoneX等机型中，底部的黑色横线会影响用户的操作，所以需要有个底部安全区域空出来，在Vant UI官方提供了一个方案，就是在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值，即项目的 Index.html 文件中，添加以下代码：

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

然后在部分组件上添加 safe-area-inset-bottom 属性，比如：

<van-tabbar v-model="tabbarActive" safe-area-inset-bottom>
  <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="user-o" @click="tabbarClick">我的</van-tabbar-item>
</van-tabbar>

这样就解决了这部分机型的底部安全区问题，但中间的内容区还是有问题，这个时候，我们就在 index.html 中定义body区样式，如下：

<style>
  body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

这样效果就出来了。