概述

以 iPhoneX 為例，頂部有劉海，下面有小黑條，四個角還有圓角，如果不做好適配，很有可能導致頁面遮擋、操作沖突等問題，所以我們需要將頁面內容控制在安全區域，即可視窗口區域。

IOS如何適配？

第一步，設置網頁在可視窗口的布局方式。

<meta name="viewport" content="width=device-width, viewport-fit=cover" />

這是 IOS11.2 新增的特性，蘋果為了適配 iPhoneX 對現有 viewport meta 標簽的一個拓展，viewport-fit 可設置三個值，具體可見 The viewport-fit descriptor ：

• contain：可視窗口完全包含網頁內容
• cover：網頁內容完全覆蓋可視窗口
• auto：默認值，跟contain表現一致

第二步，頁面主體內容限制在安全區域內

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .page {
    /* ios < 11.2 */
    padding-left: constant(safe-area-inset-left);
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    /* ios >= 11.2 */
    padding-left: env(safe-area-inset-left);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@supports 用于檢測是否支持 safe-area-inset。

安卓如何適配？

目前安卓并沒有很好的適配方案，如果涉及到沉浸式體驗，建議讓客戶端進行劉海適配，客戶端可以獲取到劉海的高度。如果客戶端不支持，則可設置為 28px，此高度可適配大多數安卓劉海屏。

.page.android {
  padding-top: 28px;
}