首先meta标签设置

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scala
ble=no,viewport-fit=cover">

image.png

☆ 注意红框处位置的写法，否则不生效

应用样式

@supports (padding-top: env(safe-area-inset-top)) {
        .{你的classname} {
              padding-top: env(safe-area-inset-top);
          }
}

注： 该写法只针对ios端生效，android端需要原生端给出安全距离高度

记录一个坑： 刘海屏安全距离不生效

我们项目里写死了width： 750，meta标签这样写的：

<meta name="viewport" content="width=750,user-scalable=no,maximum-scale=1,viewport-fit=cover">

导致刘海屏幕渲染出来的安全距离始终比预期的小，这种情况下就需要根据设备宽度进行一个比例转换：

1. 上js代码，获取设备的真实宽度

document.documentElement.style.setProperty('--device-width', window.screen.width)

此处用到了css变量 --device-width，详见阮一峰CSS变量教程

2. 上css代码，按照比例添加padding-top

.{你的classname} {
    padding-top: calc(env(safe-area-inset-top) / var(--device-width) * 750);
}

附上：理解viewport width=device-width参考

1. meta name="viewport" content="width=device-width,initial-scale=1.0" 究竟什么意思
2. 一些关于Viewport与device-width的东西～
3. name="viewport" width="device-width" 到底都是啥