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.