首先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" 到底都是啥
