iPhone底部手势条遮住fixed元素的根本原因是未在viewport meta中添加viewport-fit=cover，导致safe-area-inset-bottom变量失效；必须按constant→env顺序声明padding-bottom，并为主容器设置含该变量的padding-bottom以撑开内容区域。
fixed底部元素被iPhone手势条遮住，是因为没读到安全区变量
env(safe-area-inset-bottom) 返回 0px，不是你写错了，而是 viewport-fit=cover 没加进 <meta name="viewport">。iOS Safari 默认禁用安全区变量，不加这个参数，env() 和 constant() 全部失效——这是 80% 修复失败的根源。
必须在 <head> 中写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意：viewport-fit=cover 是开关，不是可选项；user-scalable=yes 会干扰安全区上下文，建议移除。
padding-bottom 要写两遍，且顺序不能错
constant(safe-area-inset-bottom) 是 iOS 11.0–11.1 的兼容写法，env(safe-area-inset-bottom) 是当前标准。Safari 遇到不认识的函数直接忽略整条声明，不会往下执行，所以必须按旧→新顺序书写，并允许降级生效。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
padding-bottom: env(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);（新版覆盖旧版，旧版设备彻底失效） - 正确写法（双保险）：
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
- 如果还要叠加基础间距（如导航栏自身高 60px），必须用
calc()：padding-bottom: calc(60px + env(safe-area-inset-bottom));。注意：旧版 Safari 不支持calc()里嵌env()，所以这行要放在env()声明之后，作为增强而非替代。
别把 env() 用在 bottom、height 或 margin-bottom 上
env(safe-area-inset-bottom) 只能在 padding、margin（仅部分浏览器支持）、inset 等接受长度值的属性中参与计算，且**不能单独作为定位值使用**。
- ❌ 无效：
bottom: env(safe-area-inset-bottom);（Safari 忽略，回退为 0） - ❌ 无效：
height: env(safe-area-inset-bottom);（语法错误，不解析） - ✅ 有效：
padding-bottom: env(safe-area-inset-bottom); - ✅ 有效（现代写法）：
inset-block-end: env(safe-area-inset-bottom);（需配合position: fixed，语义更清晰）
真正起作用的是「撑开内容区域」或「推远固定元素底边」，而不是挪动它的锚点位置。
主体内容必须主动留白，否则文字照样被盖住
fixed 元素脱离文档流，页面滚动到底部时，正文最后一段会直接钻进导航栏下面——这不是安全区问题，是布局逻辑本身决定的。只修 fixed 元素，不处理内容容器，永远有遮挡。
- 给最外层内容容器（如
#app或main）设padding-bottom，值 = 导航栏高度 +env(safe-area-inset-bottom) - 务必加
box-sizing: border-box，避免 padding 额外撑高 - 别用
margin-bottom：它不撑开内容区域，且易与兄弟元素发生外边距合并 - 示例：
main {<br> padding-bottom: calc(60px + env(safe-area-inset-bottom));<br> box-sizing: border-box;<br>}
安全区变量本身很稳定，日常开发可当静态像素值用；真正容易出问题的，是忘了让内容“知道”底下有个固定块，以及 viewport meta 漏掉那一行 viewport-fit=cover。
