fixed定位按钮错位因未适配安全区域和键盘遮挡，应使用inset、env(safe-area-inset-bottom)、visualViewport API及JS检测键盘弹出。
fixed定位的按钮为什么总在错误位置？
因为 fixed 是相对于视口定位，但很多人直接写 top: 20px; right: 20px; 后发现：小屏下按钮被截断、键盘弹出时错位、iOS Safari 中 bottom 偏移失效。根本原因是没考虑安全区域（尤其是 iPhone 底部）和输入法遮挡场景。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
inset替代单边top/right/bottom/left，例如inset: auto 16px 80px auto;（保留底部留白适配虚拟导航栏） - 在 iOS 上加
padding-bottom: env(safe-area-inset-bottom);到 body，再让按钮bottom: calc(16px + env(safe-area-inset-bottom)); - 避免用
vh单位做垂直偏移——Safari 滚动时100vh会动态收缩，导致按钮跳动
悬浮反馈按钮的 hover/focus 状态怎么不触发？
移动端没有 hover，且 :focus 默认只对可聚焦元素生效。如果按钮是 <div> 或没设 tabindex，点击后状态立即消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用语义化
<button>，或给非 button 元素加tabindex="0" - 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，避免移动端误加载 - 为触控设备单独定义
:active和:focus-visible，例如：@media (hover: none) { .feedback-btn:active { transform: scale(0.96); } }
媒体查询里该按宽度还是交互方式切响应点？
只按 max-width 切断点容易翻车：比如折叠屏展开后宽度 >768px，但仍是触控优先；又或者 iPad 横屏 1024px 宽度，却有鼠标可用。应该以交互能力为第一维度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (hover: hover) and (pointer: fine)区分鼠标/触控环境 - 再叠加宽度约束，例如：
@media (hover: hover) and (pointer: fine) and (max-width: 768px) { .feedback-btn { right: 12px; bottom: 12px; } } - 避免用固定像素断点如
768px，改用相对单位或容器查询（@container）更健壮，但需检查浏览器支持（Chrome 105+ / Safari 16.4+）
如何让按钮在键盘弹出时不被遮住？
Android 和 iOS 键盘弹出会压缩视口高度，fixed 元素仍锚定在原 bottom 值，结果被盖住。这不是 CSS 能单独解决的问题，必须结合 JS 检测。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
resize事件，对比window.innerHeight与上次记录值，下降超过 15% 视为键盘弹出 - 键盘弹出时临时改用
position: absolute并绑定到一个滚动容器底部（如 main），而非视口 - 用
visualViewportAPI 更精准：监听visualViewport.height变化，比resize更及时
真正难的是边界情况：比如微信内置浏览器不触发 resize，需要 fallback 到 focusin + 定时检测 document.activeElement 是否为输入类元素。
