css 判断在支持某些属性的情况下再添加样式

:root {
  --safe-area-inset-top: 0px;
  --safe-area-inset-right: 0px;
  --safe-area-inset-bottom: 0px;
  --safe-area-inset-left: 0px;
  --safe-area-inset-constant-top: 0px;
  --safe-area-inset-constant-right: 0px;
  --safe-area-inset-constant-bottom: 0px;
  --safe-area-inset-constant-left: 0px;
}

@supports (top: env(safe-area-inset-top, 44px)) {
  :root {
    --safe-area-inset-top: env(safe-area-inset-top, 44px);
    --safe-area-inset-right: env(safe-area-inset-right, 34px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 34px);
    --safe-area-inset-left: env(safe-area-inset-left, 34px);
  }
}

@supports (top: constant(safe-area-inset-top)) {
  :root {
    --safe-area-inset-constant-top: constant(safe-area-inset-top);
    --safe-area-inset-constant-right: constant(safe-area-inset-right);
    --safe-area-inset-constant-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-constant-left: constant(safe-area-inset-left);
  }
}

@supports 来实现。
、、
js 判断

window.CSS && CSS.supports('padding: env(safe-area-inset-top)')