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);
      }
}