CSS適配劉海屏和小黑條

概述

以 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;
}
複製代碼