比如我寫了乙個底部按鈕，漂浮在所有內容的上方，以下**當在iphonex的時候，就會被遮擋大約20px
// 正常手機使用的**
/* 外層盒子 */
.hasbtn-padding
/* 底部定位的按鈕 */
.bottom-button-box
使用css適配到有橫條的手機，把外層盒子的padding-bottom修改的同時，需要把按鈕的底部距離設定了，按鈕加了個after是為了防止外層盒子滑動的時候，橫條處的內容穿透。
/* 適配iphonex */
@supports (bottom: env(safe-area-inset-bottom))
.bottom-button-box
}}
使用 css 適配 iphoneX 劉海屏
iphonex 劉海螢幕導致 h5 頁面不能正常的全屏顯示了，就需要對 頁面進行適配，下面就詳細說說如何適配。首先上一張適配之前的圖 可以看到頁面頂部被遮擋，底部貼著最下面 ios11 增加新特性，增加webkit 的 css 函式，css 預定義變數 四個預定義變數為設定安全區域和邊界的距離，如下...
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...