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...