移动端点击无响应主因是 :active 伪类被忽略；应添加 touch-action: manipulation、用 javascript 切换 class、避免混用 :hover/:focus、确保触摸目标 ≥44px、消除 click 300ms 延迟。
交互样式在移动端点击无响应？检查 :active 伪类是否被忽略
很多 CSS 交互效果（比如按钮按压变色）在桌面端正常，但在 iOS 或部分安卓浏览器里点不动，根本原因是 :active 伪类默认不触发——浏览器为了防止误触，会延迟或禁用该状态，除非页面明确声明了可交互区域。
- 给
或根容器加cursor: pointer（仅 Safari 旧版有效） - 更可靠的做法：在任意绑定交互的元素上添加
touch-action: manipulation，它会启用快速点击并激活:active - 避免只依赖
:active实现核心反馈，建议配合onclick或ontouchstart添加 class 切换（如.is-pressed）
hover 和 tap 行为冲突？别混用 :hover 与 :focus 做交互开关
PC 端靠悬停，移动端靠点击，但很多 CSS 写成 button:hover, button:focus { ... } 后，在 iOS 上首次点击会触发 :focus 并卡住样式，再点才“真正”响应。
- 移动设备没有持续 hover，
:hover只在点击瞬间触发一次（且可能不触发），不能作为主要交互依据 - 若需统一反馈逻辑，优先用 JavaScript 监听
pointerdown/pointerup，再切换自定义 class - 真要用纯 CSS，改用
@media (hover: hover) and (pointer: fine)区分精细指针设备，单独写 hover 样式
触摸目标太小导致误操作？用 min-width 和 min-height 配合 padding
WCAG 要求可点击区域至少 44px × 44px，但很多人只设了 font-size 或 height，忽略了实际触摸热区。
- 按钮内容（文字/图标）尺寸 ≠ 可触控区域尺寸，必须显式设置
min-width和min-height - 用
padding扩展热区比用width/height更安全，避免内容被裁切或布局错位 - 在
@media (max-width: 768px)中重置关键按钮的min-height至44px，并确保line-height不覆盖它
@media (max-width: 768px) {
.btn {
min-width: 44px;
min-height: 44px;
padding: 12px 16px;
}
}
JavaScript 绑定事件监听器时，为什么 click 在 iOS 上有 300ms 延迟？
这不是 CSS 问题，但直接影响交互一致性——用户点了没反应，以为卡了，其实是浏览器在等双击缩放。
立即学习“前端免费学习笔记（深入）”；
- 现代方案：在
加<meta name="viewport" content="width=device-width, initial-scale=1">，这是启用 fastclick 的前提 - 不用第三方库的话，直接监听
touchstart并preventDefault()，但注意：这会禁用原生滚动，慎用 - 推荐组合：用
pointerdown（兼容性好，无延迟，自动归一化 touch/mouse） + CSSuser-select: none防止长按选中干扰
