iphoneX的“劉海”為相機和其他組件留出了空間，同時在底部也留有可操作區域。那么網站邊尷尬了~被限制在了這樣的“安全區域”內，兩邊會出現一道白條。解決的方案是：1、給body添加一個background；2、添加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;}
}