三步適配iPhoneX

第一步，設定meta: viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
複製程式碼

第二步，定義一個safe-area.css:

採用 calc + var 的方式。

:root {
  /* no safe area */
  --safe-area-inset-top: 0px;
  --safe-area-inset-bottom: 0px;
  --safe-area-inset-left: 0px;
  --safe-area-inset-right: 0px;
}

/* ios11.2 before */
@supports (bottom: constant(safe-area-inset-bottom)) {
  :root {
    --safe-area-inset-top: constant(safe-area-inset-top);
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-left: constant(safe-area-inset-left);
    --safe-area-inset-right: constant(safe-area-inset-right);
  }
}

/* ios11.2 later */
@supports (bottom: env(safe-area-inset-bottom)) {
  :root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);
  }
}

/* not support safe-area constants */
@supports not ((bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom))) {
  /* iphoneX */
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    
    :root {
      --safe-area-inset-top: 44px;
      --safe-area-inset-bottom: 34px;
      --safe-area-inset-left: 0;
      --safe-area-inset-right: 0;
    }
  }

  /* iphoneX landscape mode */
  @media only screen and (device-width: 812px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 3) {
    :root {
      --safe-area-inset-top: 0;
      --safe-area-inset-bottom: 21px;
      --safe-area-inset-left: 44px;
      --safe-area-inset-right: 44px;
    }
  }       
}
複製程式碼

第三步，引入上面的css，並按如下使用：

.footer {
    bottom: 20px;
    bottom: calc(20px + var(--safe-area-inset-bottom));
}
複製程式碼