因為我的專案 是一個 五和一 的商戶端, 說白了就是五個小程式融合到一個webapp中 , 做出來三個的時候 , 因為專案急著用 , 就給別人用

用完 在 IOS 部分手機上面會出現頂部 留海 遮擋住 webapp 頁面標題的問題 , 底部的 四個 tab 欄, 會被 黑色的橫條遮擋住的問題 , 在網上查詢

了一大堆的解決辦法 , 最終還是用 iphone 官方 提供的 API 解決的

viewport-fit=cover"

在移動端的 核心標籤 meta 中新增這一句話 , 這是重中之重, 沒有這個標籤的話 , 下面的屬性就不用看了 , 因為沒有效果的

像 App 一般頂部的標題 , 都是固定的, 第一個想到的 是什麼 ? 固定定位唄

想法很好 , 等你的 傑作 提交到測試的時候, 你就徹底炸了

因為 固定定位的盒子會直接 懟 到頂部上去 和 底部上去 , 解決辦法是在固定定位裡面新增

.head {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 750px;
  height: 60px;
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
}

  margin-top: constant(safe-area-inset-top);

  margin-top: env(safe-area-inset-top);
 

這兩句的意思是 避開 Iphone 手機的 安全區域 

constant  是 適配  iphone11 之後的系統
env 是 適配 iphone11 之前的 系統 
同時寫是相容性寫法

constant(safe-area-inset-

這個是固定寫法, 後面可以更 定位的 四大屬性 , 不一定非要是  top  可以是   left right bottom 都行

另外有還有一點是 , 這個東西可以結合 計算屬性使用

比如

height: calc(100vh - constant(safe-area-inset-top))

當然 , 最佳的解決方案 是 能不用固定定位的盒子, 千萬不要用固定定位