iPhone高版本手机里底部有一个虚拟黑条，为了不让内容被遮挡，需要针对这种情况做适配。

1、在初始化页面里面添加meta配置

index.html

  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <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,minimal-ui">
  <meta name="format-detection" content="telephone=no" />
  <meta content="yes" name="full-screen">
  <meta content="application" name="browsermode">
  <meta content="true" name="x5-fullscreen">
  <meta content="app" name="x5-page-mode">
  <meta content="" name="pab-webapp-header-style">

或

index.pug

    meta(charset = 'utf-8')
    meta(name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover")
    meta(name="apple-touch-fullscreen" content="YES")
    meta(name="format-detection" content="telephone=no")
    meta(name="apple-mobile-web-app-capable" content="yes")
    meta(name="apple-touch-fullscreen" content="yes")
    meta(name="apple-mobile-web-app-status-bar-style" content="black")

2、在页面的css里添加如下属性

   @supports (bottom: env(safe-area-inset-bottom)) {

        body,
        .footer{
            box-sizing: content-box;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }