1、設(shè)置meta標(biāo)簽viewport-fit為 cover

viewport-fit 參數(shù)：1.auto（默認(rèn)）：viewprot-fit:contain;頁面內(nèi)容顯示在safe 安全區(qū)域內(nèi)

2.cover ：頁面充滿整個(gè)屏幕

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.?contain: 可視窗口完全包含網(wǎng)頁內(nèi)容

2、css constant()函數(shù) 與safe-area-inset-top &?safe-area-inset-left &?safe-area-inset-right &?safe-area-inset-bottom的介紹

? ? ? ? 1.?safe-area-inset-top??為導(dǎo)航欄+狀態(tài)欄的高度 88px?

? ? ? ? 2. safe-area-inset-left? ?豎屏?xí)r為0

? ? ? ? 3.?safe-area-inset-right?豎屏?xí)r為0

? ? ? ? 4. safe-area-inset-bottom? 底下圓弧的高度

? ? 在iOS 11中的WebKit包含了一個(gè)新的CSS函數(shù)constant()（在iOS11.2后更新為env()），以及一組四個(gè)預(yù)定義的常量：safe-area-inset-left,?safe-area-inset-right,?safe-area-inset-top和?safe-area-inset-bottom。當(dāng)合并一起使用時(shí)，允許樣式引用每個(gè)方面的安全區(qū)域的大小。

? ? 當(dāng)我們?cè)O(shè)置viewport-fit:contain,也就是默認(rèn)的時(shí)候時(shí);設(shè)置safe-area-inset-left,?safe-area-inset-right,?safe-area-inset-top和?safe-area-inset-bottom等參數(shù)時(shí)不起作用的。

? ? 當(dāng)我們?cè)O(shè)置viewport-fit:cover時(shí)：設(shè)置如下

代碼實(shí)例，如下圖：

注意：env() 跟 constant() 需要同時(shí)存在，而且順序不能換。