使用viewport-fit=cover來解決關于ios在Safari瀏覽器內容被地址欄、菜單欄或工具欄遮擋導致的兼容問題

這篇具有很好參考價值的文章主要介紹了使用viewport-fit=cover來解決關于ios在Safari瀏覽器內容被地址欄、菜單欄或工具欄遮擋導致的兼容問題。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

前言

首先，本文將會詳細說明一下如何使用viewport-fit和css的env函數，如果你了解并熟悉這些東西，請直接跳到第三步【解決ios內容被Safari遮擋的兩種情況】
最后會詳細說明頁面body第一層的div設置100vh和100%高度來解決關于ios在Safari瀏覽器內容被地址欄、菜單欄或工具欄遮擋導致的兼容問題

一、viewport-fit

1. 作用

viewport-fit是專門為了適配 iPhoneX而誕生的一個屬性，它用于限制網頁如何在安全區(qū)域內進行展示。

2. 取值

viewport-fit的取值	效果
contain默認	viewprot-fit:contain;頁面內容顯示在safe area內
cover	viewport-fit:cover,頁面內容充滿屏幕

默認情況下或者設置為 auto和 contain效果相同。H5網頁設置viewport-fit=cover的時候才生效，小程序里的viewport-fit默認是cover。

3. 使用

<meta name="viewport" content="viewport-fit=cover">

注意點：meta name不能寫多個，后面的會覆蓋前面的，即你要添加viewport-fit應該是在原本的meta標簽后面添加

/* 創(chuàng)建一個html頁面默認的meta */
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
/* 需要添加上viewport-fit后應該是 */
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewprot-fit:cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

即使用的語法為

<meta name="viewport" content="... viewport-fit=cover">

二、使用css 的 env() 和 constant()函數用于設定安全區(qū)域與邊界的距離

1.iPhone手機的安全區(qū)域（如下圖）

viewport-fit,ios兼容,ios,safari,前端

2. 由來、作用

iOS11新增了兩個 CSS函數 env、constant，用于設定安全區(qū)域與邊界的距離。

3. 使用

（1）前提：H5網頁設置viewport-fit=cover的時候才生效，小程序里的viewport-fit默認是cover。
（2）函數內部的預定義變量

safe-area-inset-left：安全區(qū)域距離左邊邊界的距離
safe-area-inset-right：安全區(qū)域距離右邊邊界的距離
safe-area-inset-top：安全區(qū)域距離頂部邊界的距離
safe-area-inset-bottom：安全區(qū)域距離底部邊界的距離

（3）頁面中使用（一般使用頭部和底部即可，左右兩邊的距離一般設計稿就會給出一個內/外邊距來使得頁面居中的）

注意點constant 和 env 同時使用的情況下，constant函數要在env函數的上面

.content{
	padding-bottom: constant(safe-area-inset-top: 20px); /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset--top: 20px); /* 兼容iOS>= 11.2 */
    padding-bottom: constant(safe-area-inset-bottom: 20px); /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom: 20px); /* 兼容iOS>= 11.2 */
 }

（4）env()函數中的屬性區(qū)分大小寫

padding-left: env(SAFE-AREA-INSET-TOP, 50px);

注意點：env()函數中的屬性區(qū)分大小寫，而SAFE-AREA-INSET-LEFT是無法識別的屬性，所以上面CSS代碼中的padding-top值一定會使用兜底的50px。所以在實際開發(fā)中，你也可以故意寫成大寫來作為兜底的樣式。

4.語法

也就是說env函數的值單位可以是px/em/vh/rem都可以，如果不填的話就是0


/* 使用沒有回退值的四個安全區(qū)域插入值 */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* 它們與回退值一起使用 */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

5.兼容問題

這兩個函數都是 webkit 中 css 函數，可以直接使用變量函數，只有在 webkit 內核下才支持

env 函數	constant 函數
必須在 ios >= 11.2 才支持	必須 ios < 11.2 支持

三、解決ios內容被Safari遮擋的兩種情況

1.頂層div的height：100vh

1vh= 視口大小高度的 1%。
如下圖，在微信和在Safari瀏覽器中打開同一個項目的100vh占比情況

viewport-fit,ios兼容,ios,safari,前端

由于wh代表的是視口大小的高度，而在ios的Safari瀏覽器中，地址欄和菜單欄/工具欄也是屬于視口的一部分，所以會導致有測試的時候ios14及以上的手機打開頁面時，頁面會出現少了一部分的情況，這種情況往往是設計之初就沒有考慮到兼容問題導致的，在項目即將完成的時候，你可以通過以下代碼來解決

/* 方案1：這種方案雖然有效，但是由于不同頁面的類名不同，需要構建多套代碼 */
padding-top:env(safe-area-inset-top, 0rem); //兼容 IOS<11.2
/* 方案2：將你的高設置為內容的100%減去安全區(qū)域的距離即可，這種對我寫的這個項目代碼量最少，效果還不錯的方案了 */
height: calc(100% - env(SAFE-AREA-INSET-TOP, 0rem)); //兼容 IOS<11.2

2.頂層div的height：100%

首先校驗一個事情

1. height:100% 為什么會沒有填充整個頁面

（1）html代碼

<div class="content"></div>

（2）css代碼

.content{
   width: 100%;
    height: 100%;
    background-color: pink;
}

（3）效果圖
viewport-fit,ios兼容,ios,safari,前端
（4）原因

height: 100%是獲取父元素的全部高度，如果你有仔細了解的話就知道，body和html的高默認都是為0的，如下圖

（5）解決
給body和html設置100%的高即可，如下css代碼，html同第（1）步

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.content{
    width: 100%;
    height: 100%;
    background-color: pink;
}

2. 頂層div的height：100%的時候，這個時候你設置的env/constant的話應該將頁面限制在安全區(qū)域內

雖然safe-area-inset-*不設置值就是0，但是為了更好理解，我個人還是會加上這個0

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

總結

（1）viewport-fit：默認情況下或者設置為 auto和 contain效果相同。H5網頁設置viewport-fit=cover的時候才生效，小程序里的viewport-fit默認是cover。

（2）env函數的值（值單位可以是px/em/vh/rem都可以，如果不填的話就是0）

safe-area-inset-left：安全區(qū)域距離左邊邊界的距離

safe-area-inset-right：安全區(qū)域距離右邊邊界的距離

safe-area-inset-top：安全區(qū)域距離頂部邊界的距離

safe-area-inset-bottom：安全區(qū)域距離底部邊界的距離

（3）頂層div的height最好設置100%而不是100vh。如果設置height: 100%沒有效果，把body和html也加上height: 100% 的樣式。

MDN env函數使用參考地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/env

補充——新的視口單位

由來：雖然現有的單元在桌面上運行良好，但在移動設備上卻是另一回事。如地址欄和標簽欄在ios被遮擋的問題。為此，CSS 工作組規(guī)定了一些新的視口狀態(tài)。

視口分為了大視口、小視口和動態(tài)（前提是調整視口本身的大小，否則這些視口百分比單位的大小是固定的）

大視口的單位有l(wèi)v前綴。單位為lvw、lvh、lvi、lvb、lvmin和lvmax。(是英文的l，不是數字1)
小視口的單位有sv前綴。單位為svw、svh、svi、svb、svmin和svmax。
動態(tài)視口的單位有dv前綴：dvw, dvh, dvi, dvb, dvmin, and dvmax

看到上面標紅的svw和svh了嘛（劃重點）
viewport-fit,ios兼容,ios,safari,前端

如上圖，如果你開發(fā)的時候，頂層div的height設置為100svh，就會自動幫你現在頂層地址欄和菜單欄的距離在安全區(qū)域內，上面都不需要額外添加，當然，如此先進的方式有著難以避免的限制，關于兼容性的問題，谷歌瀏覽器只有108以上才能支持，可以通過https://caniuse.com/查看兼容性問題
viewport-fit,ios兼容,ios,safari,前端