iOS 11+ 中可用的 env() 安全区变量仅有四个：env(safe-area-inset-top)、env(safe-area-inset-bottom)、env(safe-area-inset-left)、env(safe-area-inset-right)，分别对应状态栏、Home Indicator 及左右圆角区域的动态偏移值，需配合 viewport-fit=cover 使用并提供 CSS fallback。
env() 函数在 iOS Safe Area 里的实际取值有哪些
iOS 11+ 提供了四个 env() 环境变量，专用于适配屏幕安全区域（Safe Area），它们不是 CSS 自定义属性，不能用 var() 读取，也不能在 JS 中通过 getComputedStyle 获取——只能直接写在 CSS 声明里。真正可用的只有这四个：
-
env(safe-area-inset-top)：状态栏高度（iPhone X 及之后竖屏约 44px，横屏约 24px） -
env(safe-area-inset-bottom)：底部横条（Home Indicator）高度，竖屏固定为34px，横屏为21px -
env(safe-area-inset-left)：左侧圆角区域宽度（仅 iPad 横屏分屏等极少数场景非零） -
env(safe-area-inset-right)：右侧同理
注意：env() 在不支持的浏览器（如旧版 Android WebView、部分桌面 Safari）中会直接被忽略，导致值为 auto 或计算失败，所以必须搭配 fallback。
如何给底部固定按钮留出 Home Indicator 空间
最常见需求是让 position: fixed; bottom: 0 的按钮不被 iPhone 底部横条遮挡。不能只靠 padding-bottom，因为横条只在竖屏出现，且高度固定但不可预测——必须用 env(safe-area-inset-bottom) 动态适配。
正确写法是同时提供 fallback 和 env 值，用 calc() 组合：
footer {
padding-bottom: 20px; /* fallback，保底值 */
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
如果元素本身是 fixed 定位到底部，更推荐改用 bottom 而非 padding：
button#action {
position: fixed;
bottom: 20px; /* fallback */
bottom: calc(20px + env(safe-area-inset-bottom));
left: 20px;
right: 20px;
}
关键点：
- fallback 值（如
20px）必须是合理默认值，不能写0，否则在不支持 env 的设备上会紧贴屏幕底边 - 不要单独写
bottom: env(safe-area-inset-bottom)，那会让按钮浮在横条上方约 34px 处，而不是“刚好避开” - 若用
margin-bottom，同样要 fallback，但 margin 不适用于fixed元素的定位控制
为什么 max-height: 100vh 不够用，得加 env
在全屏滚动页或 modal 中，常有人用 height: 100vh 或 max-height: 100vh 控制内容高度，但在 iPhone X+ 竖屏下，100vh 包含了状态栏和底部横条占用的空间，导致内容被截断或滚动条异常。
解决方案是用 env() 扣掉顶部和底部的安全区：
.scroll-container {
max-height: 100vh;
max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
这里 fallback 是 100vh，足够安全；而 calc 版本只在支持 env 的 iOS Safari 生效。注意：
- 不能写成
height: calc(...)并去掉 fallback —— 一旦 env 失效，高度会变成auto，容器塌陷 - 如果页面有 header 固定栏，还要额外减去 header 高度，但
env()部分仍应放在 calc 最外层 - 这个技巧对
viewport-fit=cover的页面尤其关键；没加该 meta 的页面，iOS 会自动缩放 viewport，env 值可能为 0
容易被忽略的兼容细节和调试方法
env() 不是万能胶，几个真实踩坑点：
- 必须在
下才生效；缺了这句，iOS 会把页面“缩进”显示，env()返回 0 - Safari 技术预览版或 iOS 15.4 之前，
env()在 iframes 里可能不更新，需监听resize并强制重绘（极少需手动处理） - 调试时，Safari 开发者工具 → Elements 面板里无法实时看到 env 计算结果，只能靠“修改后看渲染是否变化”来验证
- 安卓 WebView、微信内置浏览器、旧版 Chrome 均不支持 env，别指望它做跨平台统一方案——它只是 iOS Safe Area 的专用补丁
真机测试比模拟器可靠得多，特别是横竖屏切换时，env(safe-area-inset-bottom) 会在 34px 和 21px 之间切换，但模拟器有时卡在旧值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
