適配iPhoneX底部的小黑條

一、場景

• 由於iPhoneX去掉了物理按鍵，改為了底部小黑條，這就會導致屏幕適配問題，最常見的場景就是底部fixed的元素被阻擋的情況。對於這種問題，我們一般采取css或js的處理方式（適用於h5，小程序）。

二、css適配方案（推薦）

第一步：設置網頁的頭部標簽

<meta name="viewport" content="width=device-width, viewport-fit=cover">

viewport-fit：IOS11新增的特性，是為了iPhoneX而對meta標簽做出的一個拓展屬性。三個值：

• contain：可視窗口完全包含網頁內容
• cover：網頁內容完全覆蓋可視窗口
• auto：默認值，跟 contain 表現一致

注意：適配的關鍵在於必須設置viewport-fit=cover

第二步：將頁面主體設置在安全區域內
這一步視實際場景而定，可以不設置

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

env() 和 constant()是IOS11新增的css函數：

• 有四個預定義的變量：safe-area-inset-bottom、safe-area-inset-top、safe-area-inset-left、safe-area-inset-right，分別是安全區域到各邊界的距離。
• 橫豎屏的情況不一樣
• 對於不支持這兩個屬性的情況，瀏覽器會忽略。

注意：constant()在IOS11.2之后是不可使用的，因此要向后兼容，即env()，且二者位置不可調換。

第三步：設置目標元素（fixed）的高度

• 對於目標元素，可設置bottom、padding-bottom、margin-bottom 均可：

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

• 或者新增一個height = constant(safe-area-inset-bottom)空白區塊亦可，方案多樣。

三、JS適配方案

• 通過判斷機型給底部fixed元素添加padding-bottom，或者新增個空白區塊。

function isIphoneX(){
	return /iphone/gi.test(window.navigator.userAgent) &&
        window.devicePixelRatio &&
        window.devicePixelRatio === 3 &&
        window.screen.width === 375 &&
        window.screen.height === 812;
}

轉自：

詳解關於移動端兼容iPhoneX底部小黑條