前言

什么是安全區域？

這個概念是蘋果??率先提出來的，因為從iPhone X開始，iPhone正式進入全面屏時代，iPhone手機也就開始出現了劉海和底部的黑條的區域。Android不知道從什么時候開始越來越喜歡模仿iPhone的設計，這也就導致越來越多的機型都有這個安全區域的概念。

安全區域(safe area)

?

安全區域定義為視圖中未被導航欄、選項卡欄、工具欄或視圖控制器可能提供的其他視圖覆蓋的區域。

如上圖所示，安全區域為中間藍色部分，也就是說我們在頁面布局時應該保證頁面內容在藍色安全區域內。

所以對于這類機型，你如果不特殊處理，那么它將會是這樣的：

這樣就會導致底部輸入框的交互受影響

網頁布局方式(viewport-fit)

在處理安全區域之前，我們需要先來了解viewport-fit屬性，這是解決問題的關鍵。

iOS帶來問題的同時也帶來了解決問題的方法，為了適配 iPhoneX等全面屏機型 對現有 viewport meta 標簽進行了擴展，用于設置視覺視口的大小來控制裁剪區域。

用法

<meta name="viewport" cnotallow="width=device-width,initial-scale=1, user-scalable=0, viewport-fit=cover">

屬性值

該屬性包含三個值：

• auto：該值不會影響初始布局視口，并且整個網頁都是可見的。UA 在視口之外繪制的內容是未定義的。它可以是畫布的背景顏色，或者 UA 認為合適的任何其他顏色。（默認值，與contain表現一致）
• contain：初始布局視口和視覺視口設置為設備顯示屏中內接的最大矩形。UA 在視口之外繪制的內容是未定義的。它可以是畫布的背景顏色，或者 UA 認為合適的任何其他顏色。
• cover：初始布局視口和視覺視口設置為設備物理屏幕的外接矩形。

區別

在非矩形顯示器上（比如手表）設置視口邊界框的大小時，我們必須考慮以下因素：

• 由于視口邊界框的面積大于顯示器的面積而導致的剪切區域
• 視口邊界框與顯示區域之間的間隙

contain

當使用viewport-fit: contain時，初始視口將應用于顯示器的最大內接矩形。

cover

當使用viewport-fit: cover時，初始視口將應用于顯示器的外接矩形。

env

為了解決安全區域問題，iOS 11 新增了一個新的 CSS 函數env()和四個預定義的環境變量

• safe-area-inset-left：安全區域距離左邊邊界距離
• safe-area-inset-right：安全區域距離右邊邊界距離
• safe-area-inset-top：安全區域距離頂部邊界距離
• safe-area-inset-bottom：安全區域距離底部邊界距離

?

iOS 11 中提供的 env() 函數名為 constant()。從 Safari 技術預覽版 41 和 iOS 11.2 beta 開始，constant() 已被刪除并替換為 env()。如有必要，您可以使用 CSS 后備機制來支持這兩個版本，但以后應該更喜歡使用 env()。—— 來自webkit文檔

上面的意思是從iOS12開始不再支持使用constant函數，所以為了兼容處理，我們應該這樣寫：

body {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

使用該函數的前提是必須設置meta標簽viewport-fit=cover ，并且對于不支持 env() 的瀏覽器，瀏覽器將會忽略它。

適配安全區域

第一步：

修改頁面布局方式

<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=0, viewport-fit=cover">

第二步：

底部適配

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

這樣安全區域問題就解決了！