前端iPhone X適配總結

屏幕尺寸

垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸同樣，可是比4.7英寸的顯示屏高145pt。

安全區域

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

viewport-fit

經過對meta標籤viewport的擴展，能夠調整頁面的展示區域。viewport-fit有三個可選值：

contain:使頁面展現在安全區域內。
cover： 使頁面佔滿屏幕。
auto： 和 contain 選項表現同樣

iOS11 新增特性，Webkit 的一個 CSS 函數，用於設定安全區域與邊界的距離，有四個預約義的變量：

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

env() 和 constant()

由於以前使用的constant已經被棄用，因此須要咱們向後兼容：

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

適配

1.設置網頁在可視窗口的佈局方式使頁面徹底覆蓋整個窗口

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 只有設置了 viewport-fit=cover，才能使用 env()。

2. 頁面主體內容限定在安全區域內

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

3. fixed 元素的適配

若是元素是fixed定位且bottom=0，那麼除了設置body的padding-bottom還不夠，還須要給它自身添加padding，由於它是相對於屏幕最底部定位的。

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

或者經過計算函數 calc 覆蓋原來高度：

{
        height: calc(60px(假設值) + constant(safe-area-inset-bottom));
        height: calc(60px(假設值) + env(safe-area-inset-bottom));
   }

注意，這個方案須要吸底條必須是有背景色的，由於擴展的部分背景是跟隨外容器的，不然出現鏤空狀況。
若是元素是fixed定位且bottom不等於0，則只調整位置就能夠了，增長margin-bottom或者改變bottom。

參考

• 網頁適配 iPhoneX，就是這麼簡單
• Designing Websites for iPhone X
• Human Interface Guidelines