env(safe-area-inset-bottom) 是 iOS Safari 原生环境函数，返回底部安全区高度，仅当 viewport 设置 viewport-fit=cover 时生效；需配合 bottom 和 padding-bottom 使用，且须通过 @supports + CSS 变量模拟降级。
什么是 env(safe-area-inset-bottom)？
它不是 CSS 变量，而是原生支持的环境查询函数，专用于获取 iOS 设备底部安全区高度（比如 iPhone X 及后续带刘海/圆角的机型）。只有在 viewport 声明了 viewport-fit=cover 时，env(safe-area-inset-bottom) 才会返回非零值；否则始终为 0px。
常见错误是直接写 padding-bottom: env(safe-area-inset-bottom) 却没配 viewport-fit=cover，结果按钮永远贴底、被遮挡。
- 必须在
<meta name="viewport">中显式添加viewport-fit=cover（仅 Safari 支持，Chrome/Android WebView 忽略但无害） -
env()不支持 fallback（如env(safe-area-inset-bottom, 0)无效），需用calc()+var()模拟降级 - 只对 iOS Safari 和部分 WKWebView 生效；Android 设备一律返回
0px，不能依赖它做通用“底部留白”
如何给固定底部按钮加安全区适配？
典型场景：底部悬浮按钮（如购物车、导航栏），需要避开 iPhone 底部手势条。不能靠 JS 判断机型，应纯 CSS 驱动。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.fixed-bottom-btn {
position: fixed;
bottom: env(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* iOS 有安全区时 bottom 和 padding 同时生效，Android 下两者都为 0，自然贴底 */
}注意：bottom 控制定位基准，padding-bottom 控制内容内边距——二者作用不同，缺一不可。只设 bottom 会导致按钮上移但自身仍可能被截断；只设 padding-bottom 则按钮仍在原始位置，只是内部留空。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若按钮本身有
height且需保持视觉高度不变，padding-bottom更稳妥；若用bottom，要同步调整height或用calc()补偿 - 避免在父容器上设
env()再用margin推子元素——层级越深，越容易因父级未撑开或 overflow 截断而失效 - 不要用
env()替代媒体查询判断设备类型，它只反映当前视口是否启用安全区，和系统无关
兼容旧 iOS 或降级 fallback 怎么写？
env() 无法 fallback，但可以用 CSS 自定义属性模拟：
:root {
--safe-bottom: 0px;
}
<p>@supports (padding-bottom: env(safe-area-inset-bottom)) {
:root {
--safe-bottom: env(safe-area-inset-bottom);
}
}</p><p>.fixed-bottom-btn {
padding-bottom: var(--safe-bottom);
bottom: var(--safe-bottom);
}这样老版本 Safari（env() 的环境会回退到 0px，行为一致。注意 @supports 检测必须写全函数调用形式，@supports (env(safe-area-inset-bottom)) 是无效语法。
-
@supports里不能只写属性名，必须带值（哪怕只是占位） - 不要用 JavaScript 动态注入
--safe-bottom，既增加首屏延迟，又可能因 JS 执行时机晚于样式计算导致闪动 - 如果项目已用 PostCSS 插件（如
postcss-env-function），需确认其是否支持@supports条件编译，否则可能把env()错误转成固定值
为什么按钮在微信内置浏览器里不生效？
微信 iOS 客户端用的是 WKWebView，理论上支持 env()，但实际常因 WebView 配置未启用 viewport-fit=cover 或页面被套在 iframe 中导致 env(safe-area-inset-bottom) 返回 0。
验证方法：打开 Safari 直接访问同一 URL，对比控制台输出 getComputedStyle(document.body).getPropertyValue('padding-bottom') 是否含非零值。
- 微信中需确保页面是顶层窗口（
window.top === window.self），嵌入 H5 页常被限制在 iframe 内，此时安全区信息不可见 - 某些安卓微信版本会伪造
viewport声明，导致viewport-fit=cover被忽略——此时只能靠 UA + 屏幕高度启发式判断，但不可靠 - 真机调试比模拟器更可信：Xcode 的 Web Inspector 或 Safari 开发者工具 → “Inspect Element” 查看 computed style 中
bottom和padding-bottom实际值
实际效果取决于三个条件同时满足：viewport 声明正确、页面运行在支持环境、按钮样式作用域没被意外覆盖。任何一环断开，env(safe-area-inset-bottom) 就退化为装饰性代码。
