viewport-fit=cover是env()生效的硬性前提，不加则env(safe-area-inset-top)恒为0px；必须在meta中完整声明width=device-width、initial-scale=1.0和viewport-fit=cover，且不能被js或第三方库覆盖。
viewport-fit=cover 是 env() 生效的硬性前提
没这句 meta，env(safe-area-inset-top) 就算写十遍也返回 0px。iOS 只在明确启用视口扩展时才注入这些变量：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 必须存在且未被 JS 或第三方 SDK 覆盖。
常见错误：PWA 或全屏 WebView 中，JS 动态重写了 <meta>，导致 viewport-fit=cover 实际丢失；微信内置浏览器（X5 内核）多数版本不支持该属性，env() 值恒为 0px。
- 真机调试时用 Safari 开发者工具检查
getComputedStyle(document.body).getPropertyValue('padding-top')是否真读到非零值 - 安卓设备（包括 Chrome 90+）基本不识别
viewport-fit=cover，别指望它触发env() -
initial-scale=1.0不能省——iOS Safari 仅在此条件下启用env()函数
@supports 检测必须写对语法，否则整块规则失效
写成 @supports (env(safe-area-inset-top)) 是非法语法，浏览器直接忽略整段 CSS。正确检测方式是把 env() 放进属性声明里：
@supports (padding-top: env(safe-area-inset-top)) {
header {
padding-top: env(safe-area-inset-top);
}
}
这个检测不是查“函数是否存在”，而是查“该 CSS 声明能否被解析执行”。一旦失败，浏览器会跳过整个 @supports 块，fallback 才生效。
- 别用
@supports (background: env(...))——某些旧版 Safari 对非布局属性支持不稳定 - 不要混用
constant()和env()：Safari 15+ 已移除constant()，留着只会增加维护成本 - Vue/React 的内联样式（如
style={{ paddingTop: 'env(safe-area-inset-top)' }}）完全无效——JS 层不解析 CSS 函数，只当字符串透传
CSS 变量 + max() 是最轻量的 fallback 方案
直接写 --safe-top: env(safe-area-inset-top) 很危险：不支持的环境里变量值为 unset，后续所有依赖它的 calc() 都会静默失效。安全做法是用 max() 包一层：
:root {
--safe-top: max(0px, env(safe-area-inset-top, 0px));
--safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}
header { padding-top: var(--safe-top); }
.tabbar { padding-bottom: var(--safe-bottom); }
max(0px, ...) 在不支持 env() 的浏览器中退化为 0px，不会导致整条声明被丢弃；而 env(safe-area-inset-top, 0px) 本身语法非法，会报错。
-
max()是目前兼容性最好的兜底方式，比 JS 检测更轻量，也避免样式闪动 - 别用
calc(100vh - env(safe-area-inset-bottom))做全高布局——滚动时100vh会变，底部容易错位 -
env()返回的是带单位的值（如44px），不能裸奔进乘除运算：margin-top: calc(env(safe-area-inset-top) * 2)直接失效
fixed 元素避让必须用 inset 或 bottom，不能靠 padding
padding-bottom: env(safe-area-inset-bottom) 对 position: fixed 的底部 TabBar 完全无效——因为 fixed 元素脱离文档流，父容器的 padding 不影响它定位。
真正起作用的是控制其定位偏移：
.tabbar {
position: fixed;
bottom: 0;
inset: auto 0 env(safe-area-inset-bottom) 0; /* 推荐，语义清晰 */
/* 或 */
bottom: env(safe-area-inset-bottom);
}
注意：bottom: env(safe-area-inset-bottom) 后面不能省单位，也不能写成 bottom: var(--safe-bottom)——CSS 变量无法动态响应 env() 的实时变化，横竖屏切换时值不会更新。
- 如果用了
z-index分层，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住 - Canvas 或 WebGL 全屏渲染时，
env()不影响 canvas 坐标系，必须用 JS 读取window.visualViewport补偿 - 别在
html或body上全局加padding——会破坏 fixed 元素、地图组件、弹窗等第三方 UI 的布局流
实际项目里最容易被忽略的点：env() 值是动态的，横屏、Safari 地址栏收起、甚至分屏模式都会改变 safe-area-inset-top，但 CSS 本身无法监听这些变化；需要避让的区域又不止顶部底部——比如 iPad Pro 横屏时 safe-area-inset-left 可能非零，但多数开发者只测了 iPhone 场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
