添加 mate 属性 viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

设置 safe-srea-inset-*确保安全边界

constant 好像是老版本机型

.page{
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}

# 注意：
.page{
    height:100%; //生效
    height:100vh; //不生效
}

<!--解决vant 默认底部安全区域下面空白太多问题，这种只有嵌套到App才会有-->
html,
body,
#app {
  width: 100%;
  height: 100vh; //pwa需要手动加入 height: 100%
}

@supports 隔离兼容样式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  div {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }
}