fixed悬浮球移动端点不中主因是viewport缩放、解析偏差及触摸坐标未同步校准，尤其受transform、键盘弹出和user-scalable=yes影响；应禁用缩放、避免祖先transform、用px+env(safe-area-inset-bottom)适配，禁用:hover改用touchstart反馈。
fixed悬浮球在移动端点不中的真实原因
不是CSS写错了，是fixed元素在安卓WebView和iOS Safari中会因viewport缩放、解析偏差或触摸坐标未同步校准，导致点击偏移。尤其当页面有transform、键盘弹出，或启用了user-scalable=yes时，bottom值可能被重算，但点击区域没跟着动。
- 禁用
<meta name="viewport" content="... user-scalable=yes">，否则缩放会破坏fixed锚点 - 避免给
body或任何祖先元素设transform（包括translateZ(0)），它会让fixed降级为相对该层定位 - 测试时务必开启真机“缩放辅助”功能——很多“点不中”只在此场景复现
bottom值该用px、rem还是vh？
vh在iOS Safari中存在1px级渲染抖动；rem依赖根字号，且无法响应键盘弹出；而悬浮球常出现在表单页底部，键盘一弹，页面被顶起，fixed本该无视，但部分Android系统会错误重绘bottom。
- 首选
bottom: 24px（绝对单位最稳） - 若需适配全面屏，用
env(safe-area-inset-bottom)叠加：bottom: calc(24px + env(safe-area-inset-bottom)) - 禁用
bottom: 5vh：iPhone X+系列安全区会压缩可用vh，按钮容易卡在刘海下方
@media断点该按宽度还是交互能力切？
只靠max-width做断点，容易在折叠屏展开、iPad横屏等场景翻车。现代响应式逻辑应以交互能力为第一维度。
- 优先用
@media (hover: hover) and (pointer: fine)区分鼠标/触控环境，再叠加宽度约束 - 例如小屏触控设备下把右侧悬浮球移到底部：
@media (hover: none) and (max-width: 768px) { .floating-menu { bottom: 20px; left: 50%; transform: translateX(-50%); right: auto; } } - 别用
max-device-width——Chrome for Android已不支持，且无法响应浏览器窗口缩放
悬停效果在触控设备上为什么不可信？
几乎所有触摸设备默认不触发:hover，除非用户“悬停”超过1.5秒且无后续触摸动作——这违背按钮交互直觉。强行用@media (hover: hover)降级，反而让iOS用户永远看不到悬停态。
立即学习“前端免费学习笔记（深入）”；
- 把悬停效果改成交互反馈：监听
touchstart/mousedown事件，动态加class控制样式 - 禁用
transition: all，只对background-color和transform做过渡，否则低端安卓机掉帧明显 - 用
touch-action: manipulation提升小按钮触摸响应速度
