bottom: 0 被 home indicator 遮挡是因为 ios 默认将视口限制在安全区内，需添加 启用安全区变量，再用 padding-bottom: env(safe-area-inset-bottom) 适配，否则该值恒为0。
为什么 bottom: 0 在 iPhone 上会被 Home Indicator 遮住
因为 iOS 系统默认将视口限制在安全区内，bottom: 0 的 position: fixed 元素会紧贴视口底边——而这个“底边”实际落在 Home Indicator 下方，导致按钮不可点。这不是 CSS 写错了，是 viewport 没放开安全区。
必须加这句 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则 env(safe-area-inset-bottom) 永远返回 0。
-
viewport-fit=cover必须和width=device-width、initial-scale=1.0同时存在，缺一不可 - 某些微信 iOS 客户端（尤其 8.0.32 之前）会忽略
viewport-fit，此时需 JS 检测 UA 并 fallback 到固定值（如padding-bottom: 34px） - 不要在
上设overflow: hidden，否则键盘弹出时 fixed 元素会被裁剪
padding-bottom: env(safe-area-inset-bottom) 该加在哪儿
加在底部栏容器自身上，不是父容器，也不是 body。目标是让栏内内容“撑开”到安全区之上，而不是把整个栏往下推。
错误写法：bottom: env(safe-area-inset-bottom) —— 这个值不能直接参与定位计算，Safari 会静默丢弃整条声明。
- 正确用法：
padding-bottom: env(safe-area-inset-bottom)，配合height或min-height使用 - 如果栏高固定为
60px，就写height: 60px; padding-bottom: env(safe-area-inset-bottom)，别只靠 padding 帽子式撑高 - 需要留 8px 间距？低版本 Safari（15.4 之前）不支持
calc(8px + env(safe-area-inset-bottom))，得拆成两行：padding-bottom: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom))
fixed 布局下内容被遮挡怎么办
position: fixed 脱离文档流，主体内容不会自动避开它，滚动时文字/按钮可能钻进底部栏下面。
最简单可靠的解法：给主体区域预留足够底部空间。
- 主体容器加
padding-bottom，值至少等于底部栏高度（含安全区），例如padding-bottom: calc(60px + env(safe-area-inset-bottom)) - 不要依赖
margin-bottom，某些安卓 WebView 对 fixed 元素的 margin 计算不一致 - DOM 结构上，底部栏必须放在
最末尾，否则部分安卓 WebView 会因父容器overflow: hidden导致 fixed 元素被截断
要不要用 flex 布局替代 fixed
可以，但不是万能解药。Flex 方案（html/body { height: 100% } + .main { flex: 1 } + 底部栏设固定高）能避免脱离文档流的问题，但引入新风险：
- iOS Safari 软键盘弹出时，viewport 高度突变，flex 容器可能压缩或错位，底部栏上浮
- 必须确保
html和body都设height: 100%，且清除body默认margin，否则 flex: 1 失效 - 如果页面本身有下拉刷新逻辑（非第三方库），要确认 touch 事件没被底部栏拦截 —— 检查
pointer-events是否为auto（默认即可）
真正复杂的是软键盘交互场景：fixed 更可控，flex 更语义化，选哪个取决于你是否愿意为键盘弹起加一层 JS 监听（focusin/resize）并临时调整 z-index 或 bottom 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
