大家都知道，iphoneX，屏幕頂部都有一個齊劉海，iPhoneX 取消了物理按鍵，改成底部小黑條，如果不做適配，這些地方就會被遮擋，因此本文講述下齊劉海與底部小黑條的適配方法。

幾個新概念

安全區域

安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，如下圖所示：

image.png

viewport-fit

iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現有 viewport meta 標簽的一個擴展，用于設置網頁在可視窗口的布局方式，可設置三個值：

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

constant 函數

iOS11 新增特性，Webkit 的一個 CSS 函數，用于設定安全區域與邊界的距離，有四個預定義的變量（單位是px）：

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

注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置 viewport-fit=cover，不然constant 函數是不起作用的，這是適配的必要條件。

官方文檔中提到將來 env()要替換 constant ()，目前還不可用。

適配例子

第一步：設置網頁在可視窗口的布局方式

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

第二步：頁面主體內容限定在安全區域內

body {
  /* 適配齊劉海*/
  padding-top: constant(safe-area-inset-top);  
 /* 適配底部黑條*/
  padding-bottom: constant(safe-area-inset-bottom);
}

第三步：fixed 元素的適配

• bottom 不是0的情況

// bottom 不是0的情況
.fixed {
  bottom: calc(50px(原來的bottom值) + constant(safe-area-inset-bottom));
}

• 吸底的情況（bottom=0）

/* 方法1 ：設置內邊距 擴展高度*/
/* 這個方案需要吸底條必須是有背景色的，因為擴展的部分背景是跟隨外容器的，否則出現鏤空情況。*/
.fix {
  padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接擴展高度*/
.fix {
  height: calc(60px(原來的高度值) + constant(safe-area-inset-bottom));
}

/* 方法2 ：在元素下面用一個空div填充， 但是背景色要一致 */
.blank {
  position: fixed;
  bottom: 0;
  height: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}
/* 吸底元素樣式 */
.fix {
  margin-bottom: constant(safe-area-inset-bottom);
}

最后： 使用@supports

因為只有有齊劉海和底部黑條的機型才需要適配樣式，可以用@support配合使用：

@supports (bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}