fixed侧边悬浮按钮必须直接挂载body下，避免transform等父容器创建层叠上下文导致锚点失效；定位用px+env(safe-area-inset-bottom)，禁用user-scalable。
用 position: fixed 定位，但必须挂到
侧边悬浮按钮如果嵌套在某个 transform、filter 或 perspective 的父容器里，iOS Safari 和部分安卓 WebView 会意外创建层叠上下文，导致 fixed 锚点失效、点击热区偏移。真机测试时，很多“点不中”只在开启系统“缩放辅助”后复现。所以务必把按钮元素直接写在 下，避免任何中间包裹层干扰。
- ✅ 正确：
<div class="service-float">...</div> - ❌ 错误：
<div class="wrapper" style="transform: translateZ(0)"><div class="service-float">...</div></div> - 禁用
<meta name="viewport" content="user-scalable=yes">，否则缩放会彻底破坏锚点
right 和 bottom 值该用什么单位？优先 px + env(safe-area-inset-bottom)
别用 vh：iOS Safari 滚动时 100vh 会抖动，5vh 在 iPhone X+ 上容易卡在刘海下方；也别依赖 rem，它无法响应键盘弹出导致的视口压缩。固定像素最稳，再叠加安全区偏移即可。
- 基础定位：
right: 24px; bottom: 24px; - 适配全面屏：
bottom: calc(24px + env(safe-area-inset-bottom)); - ⚠️ 注意：
env(safe-area-inset-bottom)在旧版 Safari（0，无需降级处理，calc(24px + 0)仍能正常解析 - 不要用
inset简写（如inset: auto 24px 24px auto），部分旧 Safari 不支持
键盘弹出时按钮被顶起？监听 focusin 动态调整 bottom
这不是 bug，是 Android Chrome 80+ 和部分国产浏览器对 visualViewport API 支持不一致所致：它们错误地将 fixed 元素随页面一起上推。解决方案不是阻止键盘，而是感知输入焦点并临时补偿。
- 监听
focusin事件，当input或textarea获得焦点时，给按钮加类（如.keyboard-active），其样式为：bottom: calc(24px + env(safe-area-inset-bottom) + 200px); - 监听
blur恢复原始bottom - 更稳妥的替代方案：
position: sticky+margin-bottom，在现代浏览器中表现更可控，且天然规避键盘重绘问题
:hover 在触控设备上永远别信，改用事件驱动状态
几乎所有触控设备默认不触发 :hover，除非用户悬停超 1.5 秒且无后续触摸——这完全违背按钮交互直觉。用 @media (hover: hover) 做降级，反而会让 iOS 用户永远看不到悬停态。
- 用
touchstart/mousedown添加.is-active类控制反馈样式 - 给按钮加
tabindex="0"，配合:focus-visible保障键盘可访问性 - 禁用
transition: all，只对background-color和transform做过渡，防低端安卓掉帧
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
