必须用padding-bottom: calc(env(safe-area-inset-bottom) + 0px)，因Safari强制要求env()需参与calc()计算，否则静默失效；同时需配合，并设置合理fallback如padding-bottom: 8px。
移动端底部安全区导致 padding-bottom 失效
iPhone X 及后续全面屏机型的底部 Home Indicator 区域（约 34px）会遮挡内容，但 padding-bottom 设为固定值（如 34px）在非全面屏设备上会多出空白，且无法响应系统设置（如“缩放文字”或“辅助功能→显示大小”调整）。这不是 bug，是视口行为变化后盒模型未对齐的真实表现。
- 安全区不是 CSS 原生概念，而是通过环境变量
env(safe-area-inset-bottom)暴露给 CSS 的 -
padding-bottom: 34px是硬编码，不随系统开关（如“引导式访问”或“动态岛启用状态”）变化 - 若父容器使用
box-sizing: border-box，padding-bottom仍会参与总高度计算，但安全区需要的是“视觉留白”，而非“布局占位” - 直接用
env()替换固定值时，必须配合calc()，否则浏览器忽略（例如padding-bottom: env(safe-area-inset-bottom)不生效）
正确写法：用 calc() + env() 动态注入安全区值
必须把 env(safe-area-inset-bottom) 放进 calc() 中，哪怕只是加 0 —— 这是 Safari（iOS 11.2+）和 Chrome for iOS 的强制要求。否则该声明会被静默丢弃，退回到 0。
- ✅ 正确：
padding-bottom: calc(env(safe-area-inset-bottom) + 0px); - ✅ 更实用：
padding-bottom: calc(env(safe-area-inset-bottom) + 8px);（加额外呼吸感） - ❌ 错误：
padding-bottom: env(safe-area-inset-bottom);（无效） - ❌ 错误：
padding-bottom: env(safe-area-inset-bottom, 0px);（env()不支持 fallback 语法）
兼容性兜底与避免布局塌陷
旧版 iOS 或 Android WebView 可能不识别 env()，直接设 padding-bottom 会导致非安全区设备多出空白。需用 @supports 隔离现代写法，并确保 fallback 值合理（通常设为 0 或极小值）。
- 不要用
padding-bottom: 0作为 fallback —— 它会让全面屏设备底部被截断；应设为一个保守默认值，如8px -
@supports (padding-bottom: env(safe-area-inset-bottom))写法不可靠，应改用@supports (padding-bottom: env(safe-area-inset-bottom, 0px))（虽 fallback 无效，但检测本身可触发支持判断） - 更稳妥的做法是：先设通用 fallback，再用
@supports覆盖 ——padding-bottom: 8px; @supports (padding-bottom: env(safe-area-inset-bottom)) { padding-bottom: calc(env(safe-area-inset-bottom) + 8px); } - 若元素有
position: fixed; bottom: 0，仅靠padding-bottom不够，需配合margin-bottom或inset（CSS Logical Properties）控制定位边界
为什么不能只靠 JavaScript 动态计算？
JS 获取 visualViewport 或 window.innerHeight 并手动设 style，看似灵活，但存在三个硬伤：
立即学习“前端免费学习笔记（深入）”；
- 首次渲染时 JS 未执行，页面底部会闪动（FOUC）
- 横竖屏切换、辅助功能开启等事件触发频繁，JS 监听易漏或性能差（尤其低端 Android）
- 无法响应系统级安全区变化（如用户开启“隐藏指示器”后又关闭），而
env()是实时绑定的 CSS 变量 - CSS 方案天然支持服务端渲染（SSR）和静态站点，JS 方案则破坏首屏一致性
真正要留意的不是怎么写 env()，而是别让 padding-bottom 和 height 或 max-height 形成冲突 —— 比如给一个全屏卡片设了 height: 100vh 又加 padding-bottom: calc(...)，结果总高度超视口，触发意外滚动条。这时候该用 min-height: 100vh 或 height: 100dvh（动态视口单位）替代。
