移動端 iphonex适配

（一）簡介

iphoneX，螢幕頂部都有一個齊劉海，iPhoneX 取消了實體按鍵，改成底部小黑條，如果不做适配，這些地方就會被遮擋，是以本文講述下齊劉海與底部小黑條的适配方法

對于網頁而言，頂部（劉海部位）的适配問題浏覽器已經做了處理，是以我們隻需要關注底部與小黑條的适配問題即可（即常見的吸底導航、傳回頂部等各種相對底部 fixed 定位的元素）。

處理前後效果圖：

移動端 iphonex适配

（二）幾個重要概念

安全區域：

一個可視視窗範圍，處于安全區域的内容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響。

viewport-fit：

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

auto\contain\cover

auto\contain：可視視窗完全包含網頁内容（左圖）。頁面内容顯示在safe area内

cover：網頁内容完全覆寫可視視窗（右圖）。頁面内容充滿螢幕。

移動端 iphonex适配

constant 函數：

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

body {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
     padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
     padding-right: env(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

注意：

1）需要适配 iPhoneX 必須設定 viewport-fit=cover，不然 constant 函數是不起作用的，這是适配的必要條件

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

為此目前我們可以看作 constant：針對iOS < 11.2以下系統，env：針對于iOS >= 11.2的系統

使用的時候 env() 必須寫在 constant () 後面

（三）适配方案

第一步：設定網頁在可視視窗的布局方式（viewport-fit=cover"）

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

body {
  padding-top: constant(safe-area-inset-top);  
   padding-top: env(safe-area-inset-top);  
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：相對底部 fixed 定位的元素适配

1、fixed吸底元素（bottom = 0）

<div class="footer ipx-padding-safe-area"></div>
// 或者
<div class="footer ipx-height-safe-area"></div>
// 或者
<div class="footer ipx-margin-safe-area"></div>
<div class="ipx-footer-safe-area"></div>

/* 通過加内邊距 padding 擴充高度 */
.ipx-padding-safe-area{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
/* 通過計算函數 calc 覆寫原來高度 */
.ipx-height-safe-area{
    height: calc(1rem +  constant(safe-area-inset-bottom));
    height: calc(1rem +  env(safe-area-inset-bottom));
}
/* 通過加外邊距 margin 增加底部距離 */
.ipx-margin-safe-area{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}
/* 
以上方式需要吸底條必須是有背景色的，因為擴充的部分背景是跟随外容器的，否則出現镂空情況。 
還有一種方案就是，可以通過新增一個新的元素（空的顔色塊，主要用于小黑條高度的占位），然後吸底元素可以不改變高度隻需要調整位置
*/
.ipx-footer-safe-area{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
	background-color: #fff;
}

2、fixed 非完全吸底元素（bottom ≠ 0），比如 “傳回頂部”、“側邊廣告” 等

第四步：使用 @supports 隔離相容樣式（可有可無）

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
	/* 通過加内邊距 padding 擴充高度 */
	.ipx-padding-safe-area{
	    padding-bottom: constant(safe-area-inset-bottom);
	    padding-bottom: env(safe-area-inset-bottom);
	}
	...
}

移動端 iphonex适配