h5 在全屏iphonex中的適配

iphonex 已經上線有一段時間了，作為業界劉海屏幕第一款機型，導致全屏不能正常的全屏顯示了，，所以需要對
iphonx 適配，下面就詳細說說如何適配

先看一張適配前后的圖:

iphonex 提供的 meta 頭

<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">

contain

可視化窗口完全包含網頁內容

cover

網頁內容完全覆蓋

auto

默認值和 contain 一樣

詳細見下圖(無恥盜圖):

注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置
viewport-fit=cover，這是適配的關鍵步驟。

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

在劉海全屏的時候 top 為 44px

safe-area-inset-bottom

劉海全屏的條件下是 34px

css 函數 env() 和 constant()

這兩個函數都是 webkit 中 css 函數，可以直接使用變量函數，只有在 webkit 內核下才支持

env 函數

必須在 ios >= 11.2 才支持

constant 函數

必須 ios < 11.2 支持

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology
Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use
the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going
forward.

兼容前后版本代碼

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

看下圖:

兼容代碼

下面寫的是 scss

.phonex {
  padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
  padding-top: env(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
  padding-left: env(safe-area-inset-left); //如果未豎屏時為0
  padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
  padding-right: env(safe-area-inset-right); //如果未豎屏時為0
  padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
}

完整檢測代碼

@supports 隔離兼容模式

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
  padding-top: env(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
  padding-left: env(safe-area-inset-left); //如果未豎屏時為0
  padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
  padding-right: env(safe-area-inset-right); //如果未豎屏時為0
  padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
}
@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

使用@media 媒體查詢

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
  padding-top: env(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
  padding-left: env(safe-area-inset-left); //如果未豎屏時為0
  padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
  padding-right: env(safe-area-inset-right); //如果未豎屏時為0
  padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
}
// iphonex 適配
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

最后

env 和 constant 只有在 viewport-fit=cover 時候才能生效, 上面使用的safari 的控制台可以檢測模擬器中網頁開啟web inspector.

https://webkit.org/blog/7929/... >
https://aotu.io/notes/2017/11...