對于 iPhone 8 和以往的 iPhone，由于螢幕規規整整的矩形，安全區就是整塊螢幕。但自從蘋果手機
iphoneX
釋出之後，前端人員在開發移動端Web頁面時，得多注意一個對
IOS
所謂
安全區
域範圍的适配。這其實說白了就是
iphoneX
之後的蘋果手機，在頁面上，你需要對頂部和底部多預留一點空間。造成這個問題的主要原因就是蘋果手機在螢幕上出現了所謂的
劉海屏
，而且更是在螢幕下方加了一條
小黑條
。
如圖：
安全區數值：
手機縱向時，安全區上沿是從螢幕最頂端往下 44 pt，是以，安全區并不是和「齊劉海」完全齊平，而是要再往下一點點。
「下巴」位置上，為了給 Home 訓示條足夠的空間，從下往上推 34 pt 開始才被視為安全區。
把螢幕橫過來的時候，「安全區」又産生了變化：Home 訓示條挪到了螢幕下方，而「留海」和「下巴」的安全範圍保持不變。也就是說，橫向的安全區被“壓縮”得更狹長了。
對于訓示條位移但縱向安全區不變，官方給出的解釋是：
使用者在使用手機時非常依賴肌肉記憶（比如你可以不看鍵盤打字），不對稱的設計盡管可以更有效地利用螢幕，但卻與使用者肌肉記憶相悖，容易引起誤操作。水準布局時，互動元素兩側距離相等，左側右側旋轉時位置固定，可以友善使用者記憶。
能想到那麼細節的問題，還是要給蘋果點個贊。
綠色區域是安全區域，藍色是margin
不過也有個例外，如果是滾動的長清單，為了達到全屏展示效果，文案和按鈕是可以超出安全區的。
下面我們分别介紹一下通過 CSS 和 JS 怎麼去處理，根據場景你可以自行選擇。
CSS
在
iOS11
新增特性中，Webkit 包含了兩個新的函數
env()
和
constant()
，以及四個預定義的常量：
- safe-area-inset-top：安全區域距離頂部邊界距離，狀态欄+導航欄大約為88px。
- safe-area-inset-left：安全區域距離左邊邊界距離，豎屏時為0。
- safe-area-inset-right：安全區域距離右邊邊界距離，豎屏時為0。
- safe-area-inset-bottom：安全區域距離底部邊界距離，大約高度為34px。
我們可以這樣子使用它們：
body{
/* 相容 iOS < 11.2 */
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
/* 相容 iOS >= 11.2 */
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
當然，你也可以在某個固定（fixed）在底部的元素上單獨使用：
div{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
JS
當然，有時候單純的 CSS 方式并不能滿足實際的需求場景，那麼我們就需要判斷出那些 IOS 的手機螢幕是需要特殊處理的。
而 iphoneX 之後的蘋果手機 Series 參數如下：
根據這些參數我們把蘋果手機的長屏，也就是拿螢幕的高度用來當成判斷條件：
/**
* 判斷IOS異形屏
* @returns
*/
export function isIphoneX(){
if (typeof window !== 'undefined' && window) {
var faultTolerantVal = 10; // 容錯值
return /iphone/gi.test(window.navigator.userAgent) && (window.screen.height + faultTolerantVal) >= 812;
}
return false;
};
需要的注意一點：H5網頁設定 viewport-fit=cover的時候才會生效，小程式裡的viewport-fit預設是 cover。
為了更好的了解上文意思，我們來看一下适配前後的效果：
參考連結：
做移動端Web頁面時，處理IOS的安全區域