頁面適配iPhone X系列

背景

移動端頁面開發時，有時會需要按鈕懸浮於屏幕底部。對於iPhone x及以後的系列，因爲底部小白條的存在，靠近頁面底部的交互會與系統原生小白條的交互衝突，所以需要做些兼容性的處理。

先上結論：

html:增加viewport-fit屬性，設爲cover

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

css:

/* 懸浮於屏幕底部的樣式 */
.fixed-bottom {
  bottom: constant(safe-area-inset-bottom,0px)!important; /* 適配ios < 11.1 */
  bottom: env(safe-area-inset-bottom,0px)!important; /* 視頻ios >= 11.1 */
}
/* 隔離區覆以白條，減少突兀 */
.fixed-bottom::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  height: constant(safe-area-inset-bottom,0px)!important;
  height: env(safe-area-inset-bottom,0px)!important;
  background: #fff;
  width: 100%;
}

解析

ios11以後，蘋果公司爲了 適配iphoneX，對viewport meta標籤做了一個擴展，即viewport-fit，用於設置網頁在可視窗口的佈局方式，有如下三個值：

• contain: 可視窗口完全包含網頁內容（左圖）

• cover：網頁內容完全覆蓋可視窗口（右圖）

• auto：默認值，跟 contain 表現一致
  
  而env()是css函數中的環境變量，constant()是其在iOS11.0上的命名。iOS11 新增特性，Webkit 的一個 CSS 函數，用於設定安全區域與邊界的距離，有四個預定義的變量：

• safe-area-inset-left：安全區域距離左邊邊界距離

• safe-area-inset-right：安全區域距離右邊邊界距離

• safe-area-inset-top：安全區域距離頂部邊界距離

• safe-area-inset-bottom：安全區域距離底部邊界距離

拓展

1. env函數第二個參數是可選的，如果環境變量不可用，該參數可讓您設置備用值，如env(safe-area-inset-bottom, 0px)
2. 例子中只列舉了懸浮貼底情況的適配，實際業務中可能還有留間隙的場景，可以用css的calc函數，將env()當做一個單位爲px的值來使用，如

/* 其他屬性*/
calc(env(safe-area-inset-bottom) + 60px);
/* 其他屬性*/

3. 還有一種情況，如教育類、視訊類產品的頁面適配：網頁橫屏時，頁面左右側的安全距離可能不爲0（如iPhone X的劉海等），此時需要用到safe-area-inset-left、safe-area-inset-right，可以給頁面設置padding，以保證內容的完整顯示
4. 小程序環境中不用、也無法設置viewport，可以直接使用env(…)