iphonex 劉海螢幕導致 h5 頁面不能正常的全屏顯示了，就需要對
頁面進行適配，下面就詳細說說如何適配。
首先上一張適配之前的圖：
可以看到頁面頂部被遮擋，底部貼著最下面
ios11 增加新特性，增加webkit 的 css 函式，css 預定義變數
四個預定義變數為設定安全區域和邊界的距離，如下:
safe-area-inset-left：安全區域距離左邊邊界距離
safe-area-inset-right：安全區域距離右邊邊界距離
safe-area-inset-top：安全區域距離頂部邊界距離
safe-area-inset-bottom：安全區域距離底部邊界距離
safe-area-inset-left 預設是 0
safe-area-inset-right 預設是 0
safe-area-inset-top 預設是 44px
safe-area-inset-bottom 預設是 34px
css 函式 env() 和 constant()
這兩個函式都是 webkit 中 css 函式，可以直接使用變數函式，只有在 webkit 核心下才支援
env 函式
必須在 ios >= 11.2 才支援
constant 函式
必須 ios < 11.2 支援
在寫的時候要做到相容
padding-top
:constant
(safe-area-inset-top)
;padding-top
:env
(safe-area-inset-top)
;padding-bottom
:constant
(safe-area-inset-bottom)
;padding-bottom
:env
(safe-area-inset-bottom)
;
可以看到底部安全區域個人感覺是有點多了的，所以也可以不用 safe-area-inset-bottom 這個屬性，通過**查詢（利用iphonex獨特的型號引數）來給底部留下預留空間：
// iphonex、iphonexs
@media only screen and
(device-width:
375px)
and(device-height:
812px)
and(
-webkit-device-pixel-ratio:3)
,// iphone xs max
only screen and
(device-width:
414px)
and(device-height:
896px)
and(
-webkit-device-pixel-ratio:3)
,// iphone xr
only screen and
(device-width:
414px)
and(device-height:
896px)
and(
-webkit-device-pixel-ratio:2)
}}
iPhone X全屏適配
當你的專案執行於iphone x模擬器的時候是否會出現以下這種情況？不能全屏，上下出現了大黑邊，受到以前在設定了啟動頁，把啟動頁刪除出現的上下黑框的啟發，於是想到只要給給iphone x設定乙個對應的啟動頁，就會實現全屏顯示。實現方法如下，首先開啟launchimage 我這裡啟動頁使用的launc...
IPHONE X前端適配
cover 使頁面佔滿螢幕。auto 和 contain 選項表現一樣 safe area inset left 安全區域距離左邊邊界距離 safe area inset right 安全區域距離右邊邊界距離 safe area inset top 安全區域距離頂部邊界距離 safe area in...
如何用css適配iphoneX底部橫條？！？
比如我寫了乙個底部按鈕，漂浮在所有內容的上方，以下 當在iphonex的時候，就會被遮擋大約20px 正常手機使用的 外層盒子 hasbtn padding 底部定位的按鈕 bottom button box解決辦法 使用css適配到有橫條的手機，把外層盒子的padding bottom修改的同時，...