IOS劉海屏H5 CSS適配

原文發自個人博客：柴犬工做室

在hybrid中，會遇到native把全屏交給webview的狀況，在iphone劉海屏手機上就須要作劉海屏、底部小黑條適配了

safe area / 安全區域

iphonex以後引入的新概念，安全區域指的是一個可視窗口範圍，處於安全區域的內容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，以下圖所示：

viewport-fit

iOS11 新增特性，蘋果公司爲了適配 iPhoneX等劉海屏， 對現有 viewport meta 標籤的一個擴展，用於設置網頁在可視窗口的佈局方式，可設置 三個值：

• auto 默認
• contain 可視窗口徹底包含網頁內容，左圖
• cover 網頁內容徹底覆蓋可視窗口，即頁面徹底充滿屏幕，右圖。適配關鍵！

<meta name="viewport" content="viewport-fit=cover">
複製代碼

constant(safe-area-inset-*)函數

iOS11 新增特性，Webkit 的一個 CSS 函數，用於設獲取安全區域與邊界的距離，有四個預約義的變量（單位是px）：

• safe-area-inset-left：安全區域距離左邊界距離，橫屏時適配
• safe-area-inset-right：安全區域距離右邊界距離，橫屏時適配
• safe-area-inset-top：安全區域距離頂部邊界距離，豎屏下劉海屏爲44px，iphone6系列20px，豎屏劉海適配關鍵
• safe-area-inset-bottom：安全區域距離底部邊界距離，豎屏下爲34px，豎屏小黑條適配關鍵

適配的核心是：經過 constant() 能夠獲取到非安全邊距，再結合 padding 或 margin 來控制頁面元素避開非安全區域。

Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文檔中推薦使用env( )，而 constant( ) 從Safari Techology Preview 41 和iOS11.2 Beta開始會被棄用。在不支持env( )的瀏覽器中，會自動忽略這同樣式規則，不影響網頁正常的渲染。爲了達到最大兼容目的，咱們能夠 constant( ) 和 env( ) 同時使用。

padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
複製代碼

@supports隔離兼容模式

使用@supports查詢機型是否支持 constant() / env()實現兼容代碼隔離：

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) {
  body {
    /* 適配齊劉海*/
    padding-top: constant(safe-area-inset-top);

    /* 兼容 */
    /* padding-top: env(safe-area-inset-top); */

    /* padding-top: calc(40px(原來的bottom值) + constant(safe-area-inset-top)); */

    /* 適配底部黑條*/
    padding-bottom: constant(safe-area-inset-bottom);
  }
}
複製代碼

可是，實際需求個別安卓也會成功進入這個判斷，所以加上-webkit-overflow-scrolling: touch的判斷能夠有效規避安卓機。

這種狀況在chrome中沒法模擬出來，須要真機

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {}
複製代碼

精確到機型作適配

經過寬高、像素比來判斷機型，也能夠作具體適配：

這種狀況在chrome中能夠模擬出來

/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  
}
/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  
}
/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  
}
複製代碼

固然可使用scss/less等等，寫機型判斷的全局變量，使用時直接使用變量

//scss
// iphone x/xs/11 pro
$device-x: "screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)";
// iphone xr/11
$device-xr: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)";
// iphone x/xs/11pro max
$device-xmax: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)";
複製代碼

@media #{unquote($device-x)},
       #{unquote($device-xr)},
       #{unquote($device-xmax)} {
        // do something
       }
複製代碼

等iphone12......

原文發自個人博客：柴犬工做室