移动端点击区域需≥48×48px，:active不生效主因是浏览器触控最小尺寸限制；应设padding/min-width/min-height，慎用touch-action: manipulation，保留outline或改用:focus-visible确保可访问性。
移动端点击区域太小，:active 不生效？
不是 CSS 本身失效，而是浏览器对触控有最小可点击区域要求（通常约 48×48px），低于这个尺寸，:active 状态可能被忽略或延迟触发。尤其在 iOS Safari 中，如果元素内容窄、无明确 padding 或 min-width/min-height，伪类几乎不响应。
实操建议：
- 给可点击元素（如
<a></a>、<button></button>、带onclick的<div>）显式设置 <code>padding，确保总尺寸 ≥ 48px × 48px - 避免仅靠文字撑开点击区：比如
<a href="#">编辑</a>加了font-size: 14px但没 padding，实际点击区仍极小 - 用
min-width和min-height补底，比依赖内容更可靠
button, a.btn {
padding: 12px 16px;
min-width: 48px;
min-height: 48px;
}
touch-action 设成 manipulation 有用吗？
有用，但只在特定场景下能提升响应速度——它告诉浏览器“这个区域只做点击/滚动，别等双指缩放或长按菜单”，从而跳过 300ms 延迟和手势识别等待。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 仅适用于纯点击或滚动容器，设在含表单输入、拖拽或自定义手势的区域会导致
input失焦或手势中断 - Android Chrome 支持良好；iOS Safari 从 13.4 起才支持
manipulation，旧版本会回退为auto - 不能替代点击区域优化，只是加速已有可点击区域的响应
.clickable-area {
touch-action: manipulation;
}
用 outline: none 去掉焦点框，结果触控反馈没了？
是的。outline 被移除后，很多浏览器（尤其是 Safari）会连带抑制 :active 样式或系统级触控反馈（如灰色压感 overlay）。这不是 bug，是浏览器把 outline 当作可访问性锚点之一。
安全做法：
- 保留
outline，但用outline-offset和outline-color控制样式，让它不突兀 - 对触控设备单独增强
:active：加背景色、阴影或 scale 变化，比依赖 outline 更直观 - 若必须去 outline，请用
outline: none+:focus-visible组合，保证键盘用户仍有反馈
a:focus {
outline: 2px solid #007aff;
outline-offset: 2px;
}
a:active {
background-color: #007aff;
opacity: 0.8;
}
为什么加了 padding 还是点不准？检查这三点
常见问题不在 CSS 写法本身，而在布局上下文干扰：
- 父容器有
overflow: hidden且子元素padding溢出边界，实际可触区域被裁剪 - 元素用了
transform: scale(0.8)等缩放，但浏览器计算点击区域时未同步缩放坐标（尤其 iOS） - 存在重叠的透明遮罩层（比如
position: absolute的空<div>），它拦截了触摸事件却没透传 <p>调试时打开 Safari 开发者工具的「Elements」面板，勾选「Show Rulers」，直接看真实可点击区域是否覆盖预期位置。</p> </div>
