摘要：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)元素的適配如果元素是定位且，那么除了設(shè)置的還不夠，還需要給它自身添加，因?yàn)樗窍鄬?duì)于屏幕最底部定位的。

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

安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響

通過對(duì)meta標(biāo)簽viewport的擴(kuò)展，可以調(diào)整頁面的展現(xiàn)區(qū)域。viewport-fit有三個(gè)可選值：

contain:使頁面展示在安全區(qū)域內(nèi)。
cover： 使頁面占滿屏幕。
auto： 和 contain 選項(xiàng)表現(xiàn)一樣

iOS11 新增特性，Webkit 的一個(gè) CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，有四個(gè)預(yù)定義的變量：

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

因?yàn)橹笆褂玫腸onstant已經(jīng)被棄用，所以需要我們向后兼容：

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

 
 只有設(shè)置了 viewport-fit=cover，才能使用 env()。

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

如果元素是fixed定位且bottom=0，那么除了設(shè)置body的padding-bottom還不夠，還需要給它自身添加padding，因?yàn)樗窍鄬?duì)于屏幕最底部定位的。

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

或者通過計(jì)算函數(shù) calc 覆蓋原來高度：

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

注意，這個(gè)方案需要吸底條必須是有背景色的，因?yàn)閿U(kuò)展的部分背景是跟隨外容器的，否則出現(xiàn)鏤空情況。
如果元素是fixed定位且bottom不等于0，則只調(diào)整位置就可以了，增加margin-bottom或者改變bottom。

網(wǎng)頁適配 iPhoneX，就是這么簡(jiǎn)單

Designing Websites for iPhone X

Human Interface Guidelines