必须添加 viewport-fit=cover，否则 ios 上 env(safe-area-inset-top/bottom) 恒为 0px；正确写法为 ，且需置于 中。
viewport-fit=cover 必须加，否则 env() 全是 0px
不加这个 meta 声明，env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 在 iOS 上永远返回 0px，不是“没生效”，而是系统压根不注入这些变量。常见错误是只写 width=device-width, initial-scale=1.0，漏掉 viewport-fit=cover。
正确写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 必须放在
中，且不能被 JS 动态覆盖或重复插入 - 部分 PWA 或 WKWebView 场景下，即使写了也需检查是否被宿主 WebView 强制重置
- 安卓端（包括 Chrome、微信内置浏览器）多数忽略
viewport-fit，但不影响页面渲染，只是意味着env()本来就不支持
@supports 检测要写对，不然老 Safari 直接丢整条规则
@supports (padding-top: env(safe-area-inset-top)) 是唯一可靠检测方式。写成 @supports (env(safe-area-inset-top)) 会语法报错；写成 @supports (--safe-area-inset-top: 20px) 则永远不匹配——因为这不是 CSS 自定义属性。
典型安全写法：
header {
padding-top: 20px;
}
@supports (padding-top: env(safe-area-inset-top)) {
header {
padding-top: env(safe-area-inset-top);
}
}
- iOS 11.1 及更早版本 Safari 会把
env()当非法函数直接丢弃整条声明，fallback 值必须前置 - 不要用
calc(10px + env(safe-area-inset-top))—— iOS 14.5 之前存在解析不稳定问题 - Vue/React 的内联 style（如
style={{ paddingTop: 'env(safe-area-inset-top)' }}）无效，env()只在 CSS 文件或<style></style>标签里起作用
底部 fixed 元素不能只靠 padding-bottom
给 body 或父容器加 padding-bottom: env(safe-area-inset-bottom) 对 position: fixed; bottom: 0 的导航栏完全无效——fixed 元素脱离文档流，padding 不推它。
正确做法是改用 inset 或 margin-bottom：
.tabbar {
position: fixed;
bottom: 0;
inset: auto auto 0 auto;
margin-bottom: env(safe-area-inset-bottom);
}
-
inset更语义化（inset: 0 0 env(safe-area-inset-bottom) 0），但兼容性略差（iOS 15.4+） -
margin-bottom兼容性更好，且能被@supports安全包裹 - 避免全局设置
body { padding-bottom: ... }，会影响弹窗、地图等第三方组件的定位逻辑
Android 和旧设备 fallback 不能省，max() 不是万能解
max(0px, env(safe-area-inset-bottom)) 看起来聪明，但实际有坑：某些 Android WebView（如小米 MIUI 内置浏览器）会因不识别 max() 而丢弃整个声明，导致 fallback 失效。
最稳的降级策略仍是双写：
footer {
padding-bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
}
- 第一行是默认值（建议设为
0或保守的16px），第二行覆盖它 -
env()不支持 fallback 参数（env(safe-area-inset-bottom, 0px)是非法语法） - 别依赖 UA 判断机型——微信、钉钉、飞书等容器的 WebView 行为和 Safari 不一致，
@supports是唯一可信路径
0px，必须用真机 Safari 或 TestFlight 包验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
