iphonex的瀏海螢幕且不說好看不好看，但是確實給開發造成一定困擾，有些PM希望產品能夠全螢幕展示，於是客戶端就把劉海以上的空間讓出來讓前端處理，造成一個問題就是當頁頭部固定在頂部時，如果上下滑動頁面會有較大縫隙出現，如果背景全是白色還好，否則跟斷層了似的，非常難看。
iphone螢幕尺寸
iphoneX與其他機型尺寸上的差異
導致上述問題的原因是iphoneX存在安全區域，安全區域指的是一個可視窗口範圍，處於安全區域的內容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，如下圖藍色區域：
也就是說，我們要做好適配，必須確保頁面視覺、可操作區域是在安全區域內。
具體尺寸，詳見Human Interface Guidelines – iPhoneX
如何適配？第一步，設定網頁在視覺視窗的佈局方式
<meta name=viewport content=width=device-width, viewport-fit=cover>
iOS11 新增特性，蘋果為了適配iPhoneX 對現有viewport meta 標籤的一個擴展，用於設定網頁在視覺視窗的佈局方式，可設定三個值：
注意：網頁預設不加入擴充功能的表現是viewport-fit=contain，需要適配iPhoneX 必須設定viewport-fit=cover，這是適配的關鍵步驟。具體詳見：The viewport-fit descriptor
第二步，頁面主體內容限定在安全區域內
.post { padding: 12px; padding-left: env(safe-area-inset-left); padding-left: const(safe-area-inset-left); padding-right: env(safe-area-inset-right ); padding-right: const(safe-area-inset-right);} constant 函數iOS11 新增特性，Webkit 的一個CSS 函數，用來設定安全區域與邊界的距離，有四個預先定義的變數：
注意：部分瀏覽器已經不支援constant函數，用env函數取代
預設情況下，如果客戶端處理了安全區域，效果如下：
使用全面屏viewport-fit=cover屬性後：
安全區域圖：
限定安全區域後效果圖：
上面設定了padding為12像素，如果旋轉方向後：
第三步，使用min()和max()方法
@supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset- right)); }} fixed元素固定問題
如果頁面title是前端實現的，且固定在頂部，就會出現被遮蔽的情況，這時候可以設定top值為安全距離值，例如：
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}參考文章：Designing Websites for iPhone X
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。