viewport-fit=cover 是激活 env(safe-area-inset-bottom) 的必要条件，缺省时该值恒为0px；仅ios safari支持，android及桌面浏览器不兼容。
viewport-fit=cover 必须显式声明
不加这句，env(safe-area-inset-bottom) 在 iOS Safari 中永远返回 0px，哪怕设备是 iPhone 15 Pro Max。它不是可选配置，而是开关——没开就完全不生效。
常见错误是只写 <meta name="viewport" content="width=device-width, initial-scale=1">，漏掉 viewport-fit=cover。正确写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover是唯一能激活env()的取值；contain和auto下所有safe-area-inset-*都退化为0px - Android WebView、微信内置浏览器、桌面 Chrome 均不支持该特性，真机 Safari 测试不可替代
- 如果项目需兼容老版 iOS（constant(safe-area-inset-bottom)，但仅作 fallback，现代项目可直接弃用
env() 只能在 CSS 中用，不能在 JS 里读取
getComputedStyle(el).paddingBottom 拿不到 env() 计算后的值，返回空字符串或原始声明文本。这不是 bug，是规范限制：环境变量仅参与 CSS 层级的计算，不暴露给 DOM API。
这意味着你无法用 JS 动态判断安全区是否生效，也不能基于它的值做条件渲染。所有适配必须纯 CSS 完成。
- 想测是否生效？打开 Safari 开发者工具 → Elements → 查看对应元素的 computed styles，找
padding-bottom是否显示为类似56px的实际像素值 - 不要尝试
document.documentElement.style.setProperty('--safe-bottom', 'env(safe-area-inset-bottom)')，CSS 自定义属性不支持env()函数赋值 - 若需 JS 响应方向变化（比如横屏时左侧也要留白），只能监听
resize并手动切换 class，无法自动同步env(safe-area-inset-left)
calc() 内混合单位有 Safari 版本门槛
Safari 15.4 之前不支持 calc(12px + env(safe-area-inset-bottom)) 这种写法，整条 CSS 规则会被浏览器静默丢弃——既不报错，也不生效。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
必须拆成两条声明，靠层叠覆盖：
.bottom-bar {
padding-bottom: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
- 第一条是降级值，确保老 Safari 或不支持环境变量的设备仍有基础留白
- 第二条在支持的 Safari 中会覆盖第一条，叠加出真实安全距离
-
env()不支持乘除运算，calc(env(safe-area-inset-bottom) * 2)无效；也不支持与其他函数嵌套，如min()或max()里不能放env()
四个变量必须单独声明，不能合并或简写
env(safe-area-inset-top)、env(safe-area-inset-bottom) 等是四个独立变量，没有 env(safe-area-inset) 这种写法，也没有 margin: env(safe-area-inset-bottom) 这样的简写语法。
常见错误是试图“一劳永逸”地写：padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)——这会导致整个 padding 声明失效，回退到默认值。
- 必须按边分别设置：
padding-top、padding-right、padding-bottom、padding-left - 竖屏下
left和right通常为0px，但横屏时它们才非零，不能省略声明 - 用
padding比margin更稳妥：前者撑开内容区域，后者可能破坏 flex 布局或绝对定位的锚点
真正容易被忽略的是：env() 的值在页面生命周期中是静态的——它不会随系统状态（比如刘海隐藏、屏幕旋转动画中途）实时更新。如果你的页面有动态全屏切换或横竖屏频繁切换，得靠 class 切换 + 重排来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
