iOS Safari 中 fixed 按钮因软键盘弹出错位，应使用 env(safe-area-inset-bottom) 补底、focus 时临时切 absolute、禁用缩放与 transform 触发的层叠上下文，并用 touchstart 替代 :hover/:active。
fixed 按钮在 iOS 键盘弹出时错位怎么办
不是 CSS 写错了，是 position: fixed 在 iOS Safari 中遇到软键盘时会错误重绘 bottom 值，导致按钮被顶到屏幕外或卡在刘海下方。它不会自动感知输入法高度变化。
- 用
env(safe-area-inset-bottom)补底：写成bottom: calc(24px + env(safe-area-inset-bottom))，适配 iPhone 底部安全区 - 监听
focusin/focusout事件，聚焦 input 时临时设position: absolute并锚定到表单容器底部，失焦后切回fixed - 避免用
vh做垂直偏移 —— Safari 滚动时100vh会动态收缩，按钮跟着跳 - 别依赖
window.innerHeight计算，它在键盘弹出时不可靠；改用visualViewport?.height（需检查兼容性）
移动端点不中按钮的三大隐藏原因
点击区域偏移或完全失效，往往和层叠上下文、触摸校准、缩放设置强相关，而非样式本身。
- 父容器写了
transform、filter或will-change？这些会触发新层叠上下文，让子元素的fixed定位相对该父级而非视口 —— 把按钮直接挂到<body>下最稳 -
viewportmeta 里含user-scalable=yes？必须禁用，否则缩放会破坏fixed的锚点精度 - 真机测试时开了“辅助缩放”或“粗指针模式”？很多“点不中”只在这些系统级设置开启时复现
- 加
touch-action: manipulation，强制启用快速点击，减少 300ms 延迟对触摸坐标的干扰
如何用 calc() 动态调整 right/bottom 而不依赖媒体查询
比起一堆 @media (max-width: ...)，calc() 更轻量、更连续，也更适合渐进式偏移。
- 语法必须合法：
right: calc(20px + 3vw)✅，right: 20px + 3vw❌（缺少calc()包裹） - 乘法只支持「长度 × 数字」：
right: calc(5vw * 2)✅，right: calc(5vw * 10px)❌ - 小屏慎用大比例
vw：比如right: calc(10vw + 16px)在 iPhone SE 上可能把按钮推出屏幕右侧 - 想兼顾安全距离与视觉平衡？用
clamp()：bottom: clamp(12px, 3vh, 24px)，但注意vh在 iOS 仍有抖动风险，优先用px+env()
hover 和 active 在触控设备上为何不生效
几乎所有纯触控设备（包括 iPad、Android 平板、带触控笔的 Windows 笔记本）默认不触发 :hover，:active 也有 300ms 延迟或仅闪一下就消失。
立即学习“前端免费学习笔记（深入）”；
- 别用
@media (hover: hover)降级显示悬停态 —— 这会让 iOS 用户永远看不到效果 - 把交互反馈从伪类移到 JS：监听
touchstart/mousedown，动态加.is-pressed类控制样式 - 移动端单独定义
:active和:focus-visible：@media (pointer: coarse) { .fab:active { transform: scale(0.96); } } - 禁用
transition: all—— 它会让低端安卓机掉帧；只对background-color和transform做过渡
真正难处理的是键盘弹出瞬间的定位切换时机和视觉连贯性——JS 监听 focusin 后，按钮位置突变仍可能被用户感知为“跳了一下”。这时候需要配合 transform 微调或 CSS @keyframes 补过渡，而不是只靠 position 切换。
