H5 頁面適配iPhone X，就是那麼簡單

前言

  iPhoneX 取消了物理按鍵，改爲底部小黑條，這一改動致使網頁出現了比較尷尬的屏幕適配問題。對於網頁而言，頂部（劉海部位）的適配問題瀏覽器已經作了處理，因此咱們只須要關注底部與小黑條的適配問題便可（即常見的吸底導航、返回頂部等各類相對底部 fixed 定位的元素）。

  筆者經過查閱了一些官方文檔，以及結合實際項目中的一些處理經驗，整理了一套簡單的適配方案分享給你們，但願對你們有所幫助，如下是處理先後效果圖：

  你們都知道，iphoneX，屏幕頂部都有一個齊劉海，iPhoneX 取消了物理按鍵，改爲底部小黑條，若是不作適配，這些地方就會被遮擋，所以本文講述下齊劉海與底部小黑條的適配方法。

幾個新概念

安全區域

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

viewport-fit

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

值	描述
auto	默認值，跟 contain 表現一致。頁面內容顯示在safe area內。viewprot-fit:auto等同於viewport-fit:contain
contain	可視窗口徹底包含網頁內容（左圖）。頁面內容顯示在safe area內。viewport-fit:contain
cover	網頁內容徹底覆蓋可視窗口（右圖）。頁面內容充滿屏幕。viewport-fit:cover

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 ()，目前還不可用
• 這兩個函數都是 webkit 中 css 函數，能夠直接使用變量函數，只有在 webkit 內核下才支持
• constant：針對iOS < 11.2如下系統
• env：針對於iOS >= 11.2的系統

注意：網頁默認不添加擴展的表現是 viewport-fit=contain，須要適配 iPhone 必須設置 viewport-fit=cover，這是適配的關鍵步驟。

適配例子

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

<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);
  }
}
複製代碼

完整檢測代碼

• @supports隔離兼容模式

由於只有有齊劉海和底部黑條的機型才須要適配樣式，能夠用@support配合使用：

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //爲導航欄+狀態欄的高度 88px
  padding-top: env(safe-area-inset-top); //爲導航欄+狀態欄的高度 88px
  padding-left: constant(safe-area-inset-left); //若是未豎屏時爲0
  padding-left: env(safe-area-inset-left); //若是未豎屏時爲0
  padding-right: constant(safe-area-inset-right); //若是未豎屏時爲0
  padding-right: env(safe-area-inset-right); //若是未豎屏時爲0
  padding-bottom: constant(safe-area-inset-bottom); //爲底下圓弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //爲底下圓弧的高度 34px
}

@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}
複製代碼

• @media 媒體查詢

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //爲導航欄+狀態欄的高度 88px
  padding-top: env(safe-area-inset-top); //爲導航欄+狀態欄的高度 88px
  padding-left: constant(safe-area-inset-left); //若是未豎屏時爲0
  padding-left: env(safe-area-inset-left); //若是未豎屏時爲0
  padding-right: constant(safe-area-inset-right); //若是未豎屏時爲0
  padding-right: env(safe-area-inset-right); //若是未豎屏時爲0
  padding-bottom: constant(safe-area-inset-bottom); //爲底下圓弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //爲底下圓弧的高度 34px
}

/* iphonex 適配 */
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}
複製代碼

補充

注意項

•   env 和 constant 只有在 viewport-fit=cover 時候才能生效, 上面使用的safari 的控制檯能夠檢測模擬器中網頁開啓web inspector.