必须加viewport-fit=cover，否则env(safe-area-inset-bottom)恒为0；需双声明constant()和env()且env()在后，作用于内容区padding-bottom而非body或fixed元素，安卓需js降级。
必须加 viewport-fit=cover，否则 env(safe-area-inset-bottom) 永远是 0 —— 这不是兼容性问题，是 Safari 的硬性前提。
为什么 env(safe-area-inset-bottom) 不生效
常见现象：写了 padding-bottom: env(safe-area-inset-bottom)，但 iPhone X+ 上导航栏依然被手势条盖住，点击无响应。
-
viewport-fit=cover缺失或写错（比如写成contain或漏掉），env()就不会读取系统安全区值，直接返回0px - 把
env()用在bottom、height或margin-bottom上——它只对padding和margin生效，且不能参与定位计算 - 没设
box-sizing: border-box，导致padding-bottom让容器总高度超出预期，内容被顶高或留白异常 - 安卓 WebView 或微信旧版（如 iOS 微信 8.0.32 以下）不支持
env()，但不会报错，只是静默 fallback 为0
正确写法：双声明 + 作用位置要准
安全区留白必须作用于「内容区域」，不是导航栏自身，也不是 body 全局；导航栏用 position: fixed 锁定，内容区靠 padding-bottom 主动撑开可用高度。
- 导航容器（如
.bottom-nav）设：position: fixed; bottom: 0; height: 60px; - 主内容容器（如
.page-content或main）设：padding-bottom: 60px; padding-bottom: env(safe-area-inset-bottom); - 兼容 iOS 11.0–11.1：补上
padding-bottom: constant(safe-area-inset-bottom);，且必须写在env()前面 - 不要合并成
calc(60px + env(safe-area-inset-bottom))——Safari 15.4 之前完全忽略整条声明
Flex 布局方案下如何避免踩坑
用 display: flex; flex-direction: column 替代 fixed 时，安全区适配逻辑不变，但容器约束更关键。
-
html和body都要设height: 100%，否则flex: 1失效 - 清除
body默认margin: 8px，否则 flex 高度计算偏差会导致底部悬空或溢出 - 底部导航栏必须与主内容同级（不能嵌套在 flex 容器内），否则它会被当做一个 flex 项目分配高度，失去固定语义
- 安全区留白仍加在主内容区：
.page-content { flex: 1; padding-bottom: env(safe-area-inset-bottom); }，导航栏自身只设height: 60px
真正容易被忽略的点是：软键盘弹出时，env(safe-area-inset-bottom) 不会自动更新，但视口高度会缩。这时候纯 CSS 无解，得靠 JS 监听 resize 或用 input 事件动态调整——这不是适配不到位，而是 iOS WebKit 的限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
