H5解決Iphone底部劉海問題

在H5開發過程當中，iphone x以上型號的手機一般都有底部劉海適配的問題，本文再簡單描述下該問題的解決方案以及常見的坑。

1、解決方案

入口html在viewport中新增viewport-fit=cover

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover">
複製代碼

適配的頁面css中

padding-bottom: constant(safe-area-inset-bottom); // ios < 11.2
padding-bottom: env(safe-area-inset-bottom); // ios >= 11.2
複製代碼

在須要適配的容器中新增上述屬性，將劉海撐起，具體使用什麼樣式根據具體場景而定，不侷限使用padding-bottom。

2、常見的坑

一般項目打包時，會將相同的樣式去重，如上解決方案可能會被webpack打包時刪除padding-bottom: constant(safe-area-inset-bottom);致使部分版本系統不兼容，所以，不能同時加在一個類下。

解決方案：

使用僞類或者將其中一個屬性設置到其餘也能達到效果的類下，