fixed 悬浮按钮移动端点不中，因父容器 transform/filter 触发层叠上下文导致点击偏移；应挂载到 body 下、用 touch-action: manipulation 优化，并监听 focusin/focusout 避免键盘遮挡。
fixed 定位的悬浮按钮在移动端点不中？
因为 fixed 元素在 iOS Safari 和部分安卓 WebView 中，如果父容器有 transform、perspective 或 filter，会触发新的层叠上下文，导致点击区域偏移或失效。这不是 bug，是规范行为。
- 检查按钮父级是否意外加了
transform: translateZ(0)或filter: opacity(0.99)—— 这类“优化 hack”最容易踩坑 - 真要兼容老 iOS，把按钮直接挂到
下，绕过所有可能带transform的 wrapper - 用
touch-action: manipulation提升触摸响应速度，尤其对小按钮很关键
媒体查询怎么写才不被“伪响应”骗？
只靠 max-width 做断点，常导致 iPad 横屏时按钮突然变大又缩回去 —— 因为它按视口宽度判断，但用户旋转设备后宽度突变，没过渡也没适配逻辑。
- 优先用
hover媒体特性区分触控/非触控设备：@media (hover: hover) and (pointer: fine)才加:hover效果 - 移动端慎用
:active伪类，iOS Safari 有 300ms 延迟，建议改用touchstart+ JS 切换 class - 断点别只看像素，加一句
and (min-resolution: 2dppx)区分高清屏，避免文字模糊或阴影过重
悬停动画卡顿？多半是重绘惹的祸
用 width/height/top/left 做悬浮动效，每帧都触发 layout，60fps 直接掉到 20–30fps，尤其低端安卓机明显卡顿。
- 只用
transform和opacity做动画，它们走合成层，不触发重排重绘 - 给按钮加
will-change: transform（仅在需要时），但别滥用，否则内存占用翻倍 - 动画时间控制在
0.2s–0.3s，超过 0.4s 用户会觉得“反应慢”，尤其工具类按钮
按钮始终固定在右下角，但挡住底部表单输入框
不是定位错了，是 z-index 层级和输入法弹出逻辑冲突 —— iOS 键盘升起时会强制把 fixed 元素往上推，但没通知 JS，导致遮挡。
立即学习“前端免费学习笔记（深入）”；
- 监听
resize事件不如监听focusin/focusout，在 input 聚焦时临时display: none按钮 - 别依赖
viewport高度做计算，用window.innerHeight+window.scrollY更稳 - 给按钮加
bottom: env(safe-area-inset-bottom)，适配 iPhone 刘海和 Home Indicator
