FAB在小屏上离底边太近或被遮挡的根本原因是bottom值未适配键盘弹出、安全区及WebView对vh的错误解析；应优先使用calc(24px + env(safe-area-inset-bottom))并真机验证兼容性。
fixed定位的FAB为什么在小屏上离底边太近或被遮挡
根本原因不是边距写错了，而是bottom值没考虑键盘弹出、安全区（如iPhone刘海/挖孔）和WebView对vh的错误解析。比如bottom: 20px在安卓部分机型上，键盘顶起页面后，fixed元素看似“不动”，但触摸热区实际偏移；而bottom: 5vh在iOS Safari中会因安全区压缩可用视口高度，导致按钮卡在刘海下方。
- 禁用
user-scalable=yes——缩放会破坏fixed锚点计算 - 避免给
body或根容器设transform——它会让fixed元素相对错误的视口定位 - 真机测试时开启系统“放大字体”或“辅助缩放”，很多偏移只在此类设置下暴露
bottom值该用px、rem还是env()？
优先用calc(24px + env(safe-area-inset-bottom))，这是目前最稳的组合。单独用px能保基本位置，但忽略全面屏；单独用env(safe-area-inset-bottom)在无安全区设备上 fallback 为0，需兜底；rem依赖根字号，而键盘弹出会触发iOS Safari重排根字体大小，导致跳变。
-
bottom: 24px→ 适合纯Android旧机型或内嵌WebView场景 -
bottom: calc(24px + env(safe-area-inset-bottom, 0px))→ 全面屏兜底写法，0px确保无安全区时不失效 - 绝对不要用
bottom: 5vh或bottom: 10%——它们在横竖屏切换、键盘弹出时不可预测
如何让FAB在横屏/小屏下自动右移不贴边
靠right单值响应式不够，因为小屏宽度窄，固定right: 16px可能让按钮半截悬空。正确做法是结合max-width媒体查询 + right动态缩进：
- 小屏（
max-width: 480px）：right: 8px+width: 56px（标准FAB尺寸），防止右侧留白过大 - 中屏（
481px - 768px）：right: 16px+width: 56px - 大屏（
min-width: 769px）：right: 24px+width: 80px（适配Medium FAB） - 所有情况都加
z-index: 1000，避免被position: sticky导航栏或弹窗遮盖
移动端点击FAB失效？检查这几个CSS属性
“点不中”90%不是JS问题，是CSS层缺失关键交互声明。尤其在iOS Safari和部分安卓WebView中，fixed按钮若没显式启用触摸识别，系统会忽略点击事件。
立即学习“前端免费学习笔记（深入）”；
- 必须加
touch-action: manipulation——绕过300ms延迟，同时校准触摸坐标 - 必须加
cursor: pointer——某些浏览器靠它触发:active伪类，影响反馈样式 - 按钮最小尺寸至少
min-width: 48px; min-height: 48px——满足WCAG 2.5.5触控目标规范 - 别用
:hover控制显示/隐藏——触屏设备不触发，会导致菜单永远打不开
实际项目里最容易被忽略的，是env(safe-area-inset-bottom)在iOS 15.4以下版本不支持，且部分安卓厂商定制ROM会返回0px而非真实值。上线前务必在真机上用window.getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')验证返回值。
