fixed悬浮窗被iphone底部指示条遮挡，是因为bottom:0贴至物理底边而非安全区底边；需用padding-bottom: env(safe-area-inset-bottom)配合viewport-fit=cover声明，并作用于内容容器而非body，安卓等不支持环境需降级fallback。
fixed悬浮窗为什么总被iPhone底部指示条切掉
因为 position: fixed 默认贴到视口物理底边，而 iPhone X 及后续机型的 Home Indicator 属于“不可点击安全区”，浏览器不会自动避开。你写的 bottom: 0 实际是贴到了屏幕最底下，不是内容可操作区域的底边。
如何用env(safe-area-inset-bottom)动态补足底部空隙
不能把 env(safe-area-inset-bottom) 直接写在 bottom 或 height 上——它只在 padding、margin 等盒模型属性中有效，且必须带 fallback：
-
padding-bottom: 20px是 fallback，确保老设备或不支持 env 的环境有基础留白 -
padding-bottom: env(safe-area-inset-bottom)覆盖上一行，iOS 11.2+ 和 Chrome 69+ 安卓 WebView 会读取真实值（如 iPhone 14 Pro 返回约34px） - 必须在
中声明<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则 env() 值恒为 0
为什么别给body设padding-bottom来兜底
给 body 加 padding-bottom 会影响 scrollHeight 计算，导致 IntersectionObserver 判断失准、锚点定位偏移、甚至影响某些 JS 滚动库的阈值逻辑。更稳妥的做法是：
- 把
padding-bottom加在主内容容器上（比如main或.content） - 用 CSS 自定义属性联动高度：
:root { --float-height: 60px; }，再写main { padding-bottom: calc(var(--float-height) + env(safe-area-inset-bottom)); } - 如果悬浮窗本身用了
box-sizing: content-box（默认），记得它的实际高度 =height+padding+border，别只按 height 写 padding 值
安卓和微信 WebView 中 env() 不生效怎么办
Android 大部分 WebView（包括微信内嵌页）至今不支持 env(safe-area-inset-bottom)，fallback 值会生效，但无法动态响应全面屏虚拟导航栏高度变化。此时需降级处理：
- 检测 UA 或用
@supports (padding-bottom: env(safe-area-inset-bottom))做样式隔离 - 对微信环境，可用 JS 读取
window.innerHeight与document.documentElement.clientHeight差值粗略估算底部遮挡高度 - 优先保障功能可用性：把关键按钮往上提 10–15px，比强求“完全贴底”更重要
position: fixed，那它自己不需要适配；需要适配的是它下方的内容区域，否则用户永远点不到最后一行文字。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
