vue項目在iPhoneX上的底部tab切換被小黑條遮擋問題

在修改公司以前的項目中，遇到了vue移動端在iphoneX上底部tab欄被遮擋的問題。在查網上，有很多方法，蘋果也給出了開發建議，幾乎都試了一圈。

在項目中因爲底部tab欄在iphonex的顯示問題

1. 方法一（這是我最終用的方法，實際應用中，我是在底部加了一個空div，撐起來的，單獨給#app加一個padding，在吸附在底部的tab上不是很好用）

@media only screen and (width: 375px) and (min-height: 690px){
  #app {
     padding-bottom: 0.34rem;
   }
 }

1. 方法二（我首選這個方法，因爲看起來高大上，但是我在我的項目中使用沒有生效，不知道爲啥，該加的都加了還是不好用！！）

第一步：新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：頁面主體內容限定在安全區域內

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

第三步：fixed 元素的適配

• 類型一：fixed 完全吸底元素（bottom = 0）

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

• 類型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側邊廣告” 等

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

文章參考：https://www.jianshu.com/p/578db27f0adf