前端：viewport-fit解決iphoneX的「劉海」問題

iphoneX的「劉海」爲相機和其餘組件留出了空間，同時在底部也留有可操做區域。那麼網站邊尷尬了~被限制在了這樣的「安全區域」內，兩邊會出現一道白條。解決的方案是：一、給body添加一個background；二、添加viewport-fit=cover meta標籤，使頁面佔滿整個屏幕。

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

這樣，「安全區域」將由你決定~~look this :Stephen Radford 文檔

 

爲了處理這些需求，iOS 11 的 Safari 引入了一些 constant、env 來處理 viewport-fit=cover 屬性。

• safe-area-inset-top
• safe-area-inset-right
• safe-area-inset-left
• safe-area-inset-bottom

這些值能夠應用到 margin、padding 上，也能夠應用到絕對定位的 top 或 left 上。

在網頁的 container 上添加以下代碼:

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

劉海、安全區域和 fixed 定位還會形成其餘尷尬的情景。Darryl Pogue 報告：

iOS 11 和早期版本的差別性在於 webview 內容遵循安全區域。也就是說，若是你在頂部設置一個 top 爲 0 的 fixed 定位的 header，實際位置會出現屏幕頂部如下 20px 處，和狀態欄底部是對齊的。當向下滾動的時候，會向上移動到狀態欄的後面；當向上滾動時，會再次滑到狀態欄的下方（網頁內容會在那條尷尬的 20px 的縫隙中顯示）。

可喜可賀的是，添加一個 viewport-fit=cover 標籤就能夠一鍵搞定。

媒體查詢方式

/*iPhoneX的適配*/
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
           /*添加底部適配*/
        .l_o_btm{padding-bottom: 1.7rem;}
         /*增長頭部適配層*/
        .has-topbar {height: 100%;box-sizing: border-box;padding-top: 44px;}
        .has-topbar:before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 44px;background-color: #000000;z-index: 9998;}
    }