env(safe-area-inset-bottom)必须配合viewport-fit=cover使用，否则恒为0px；应作用于内容容器的padding-bottom，且需fallback constant()并按旧→新顺序书写。
必须加 viewport-fit=cover，否则 env(safe-area-inset-bottom) 永远是 0px —— 这不是写错了，是功能没打开。
为什么写了 env(safe-area-inset-bottom) 却没效果
常见原因就三个：
-
<meta name="viewport">缺了viewport-fit=cover，或者只写了width=device-width就以为够了 - 把
env()写在了bottom、top或height上——它只对padding-bottom和margin-bottom有效 - 用在了
body上但没设box-sizing: border-box，导致 padding 额外撑高，滚动异常
padding-bottom 要加在谁身上
加在最外层内容容器上，比如 #app、main 或 .page-content，而不是 body。
- 如果导航栏是
position: fixed，给内容容器加padding-bottom是为了“撑开可用区域”，让滚动到底部时内容不钻进导航栏下面 - 如果导航栏是 flex 布局（和主体同级），
padding-bottom要加在父 flex 容器上，且该容器需设display: flex; flex-direction: column - 值要匹配导航栏真实高度（含
padding和border），不能只写60px就完事——iPhone X+ 还得叠加安全区
怎么写才兼容 iOS 11.0+ 和 Safari 版本差异
别只写一行 padding-bottom: env(safe-area-inset-bottom)。必须双保险：
- 先写
padding-bottom: constant(safe-area-inset-bottom)（iOS 11.0–11.1） - 再写
padding-bottom: env(safe-area-inset-bottom)（iOS 11.2+ 及现代浏览器），后写的会覆盖前写的 - 如果还要加固定间距（比如导航栏高
60px，再留8px空隙），Safari 15.4+ 才支持calc(60px + env(safe-area-inset-bottom))；旧版必须拆成两行：padding-bottom: 60px和padding-bottom: calc(60px + env(safe-area-inset-bottom))
fixed 底部导航自身怎么避开手势条
光靠内容容器加 padding-bottom 不够，fixed 元素自己也得“抬高”：
- 不要用
bottom: 0，改用bottom: env(safe-area-inset-bottom) - 更稳妥的是用
inset-block-end: env(safe-area-inset-bottom)或inset: auto auto env(safe-area-inset-bottom) 0，语义更清晰，也方便后续 RTL 适配 - 注意：这个
env()必须和前面的viewport-fit=cover同时存在，否则返回0px，导航栏还是沉进手势条里
真正容易被忽略的是：安全区变量不是“自动生效”的开关，而是依赖 viewport 配置的运行时环境值。一旦 meta 缺失或写错顺序，所有后续样式都会降级为 0，而且你很难从 DevTools 里一眼看出问题在哪——它不会报错，只是静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
