根本原因是ios safari将底部安全区计入视口高度而fixed元素未自动避让，必须用env()和constant()配合calc()显式留白，并启用viewport-fit=cover。
iPhone全面屏下 position: fixed 底部元素被遮挡的根本原因
不是 CSS 写错了，而是 iOS Safari 在全面屏设备（iPhone X 及后续机型）中把底部安全区（home indicator 区域）算进了视口高度，但 fixed 元素默认仍按 viewport 高度铺满，导致实际渲染时压在了不可操作的圆角+指示条区域上。系统不会自动“避开”它，必须显式声明留白。
为什么只用 padding-bottom 不够，而要上 env() 和 constant()
env(safe-area-inset-bottom) 是当前标准，iOS 11.2+ 支持；constant(safe-area-inset-bottom) 是旧版 iOS 11.0–11.1 的兼容写法。二者值相同（通常为 34px），但不共存会直接失效——Safari 会忽略不认识的函数名，且不降级执行下一个声明。
必须按顺序写，且用 calc() 包裹：
footer {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
注意：最后这行 calc() 才是关键——它把基础内边距（比如你原本设的 16px）和系统安全区叠加，避免只靠 env() 导致视觉过空。
哪些地方必须加、哪些可以不加
只对真正贴底、且用户需要点击/滑动的 fixed 元素生效，比如：
-
tabbar、bottom-nav、floating-action-button - 全屏弹层里的确定按钮（
position: fixed; bottom: 0;） - 输入框唤起键盘后固定在键盘上方的工具栏
以下情况不用加：
- 顶部
fixed导航栏（safe-area-inset-top默认为44px，已含状态栏，一般无需额外处理） - 未启用
viewport-fit=cover的页面（此时 Safari 会自动缩放内容避开安全区，但牺牲显示面积） - 使用
position: sticky替代fixed的场景（它天然受安全区影响）
别漏掉 viewport meta 声明
如果没在 里加这句，env() 函数根本不会返回有效值：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
viewport-fit=cover 是开关：不加，iOS 就当你是老式页面，强制留黑边并禁用安全区变量；加了，才允许你接管整个屏幕并读取 env()。这是最常被跳过的一步，也是修复失败的第一嫌疑点。
安全区变量只在横屏或深色模式等少数边界场景下可能变化，日常开发中把它当成静态像素值来用即可。真要动态响应，得监听 resize 并检查 document.documentElement.clientHeight 是否突变——但绝大多数业务不需要走到这步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
