最近在寫一個H5的app, 頂部和底部都是用固定定位（{position:fixed;}），但是在iphoneX上面顯示會超出屏幕，固定的位置也不穩(wěn)定。
解決方法：
1、index.html中<meta />中添加 viewport-fit=cover

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

2、給固定的header和footer添加css樣式：

/* 適配iphoneX頂部填充*/
@supports (top: env(safe-area-inset-top)){
  body,
  .header{
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
  }
}
/* 判斷iphoneX 將 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .footer{
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

參考：
關(guān)于H5頁面在iPhoneX適配