VUE项目底部tab切换在iPhoneX和iPhoneX Max 的底部小黑条挡住的解决方案

最近在移动端项目上遇到了底部tab切换被iPhoneX 和 iPhoneX Max 的小黑条影响到的问题，经过多次调试，最终的解决方案如下：

第一步：新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口（千万不要忘了，不然后面样式都没效果）

   

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

第二步：页面主体内容限定在安全区域内

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

第三步：fixed 元素的适配

/*iphoneX*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .van-tabbar--fixed{
          padding-bottom: 10px !important;
          padding-bottom: constant(safe-area-inset-bottom);
          padding-bottom: env(safe-area-inset-bottom);
      }
}
/*iphoneX Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .van-tabbar--fixed{
          padding-bottom: 10px !important;
          padding-bottom: constant(safe-area-inset-bottom);
          padding-bottom: env(safe-area-inset-bottom);
      }
}