按钮最小点击区域必须≥44×44px，应使用padding扩展热区并设min-width/min-height；touch-action: manipulation须直接作用于按钮元素以消除点击延迟。
按钮最小点击区域必须 ≥ 44×44px
移动端手指点击不准，iOS Human Interface Guidelines 和 Android Material Design 都明确要求可点击元素最小尺寸为 44px × 44px。这不是“建议”，是实际触发失败的临界值——小于这个尺寸，Safari 和 Chrome 都会自动放大或合并点击热区，导致误触或响应延迟。
实操上别只改 width/height，用 padding 扩展点击区域更安全：
button {
padding: 12px 20px;
min-width: 44px;
min-height: 44px;
}- 直接设
width: 44px容易被文字撑大或截断，padding能保热区不缩水 - 用
min-width/min-height而非固定宽高，兼容不同文案长度 - 避免对
font-size做极端缩放——小字号+小容器 = 实际可点区域进一步缩水
touch-action: manipulation 要加在按钮本身
不加这句，iOS Safari 默认有 300ms 点击延迟，Android 某些 WebView 也会犹豫。但很多人加错位置：写在 body 或父容器上无效，必须作用于可点击元素本身。
正确写法：
立即学习“前端免费学习笔记（深入）”；
button, .btn {
touch-action: manipulation;
}-
manipulation表示“只处理点击，禁用双指缩放/拖拽”，比none更精准且不影响滚动 - 旧版安卓（fastclick 库降级，但新项目基本不用管
- 如果按钮内嵌了
input或iframe，这些子元素可能覆盖掉touch-action，得单独重置
伪元素 ::before/::after 会干扰点击热区
用 ::before 画个圆角背景、加个图标很常见，但 CSS 伪元素默认不参与事件捕获——用户点在图标上，实际触发的是按钮内容区，一旦内容为空或居中偏移，就点不中。
解决方法只有两个：
- 给伪元素加
pointer-events: none，确保点击穿透到底层按钮 - 或者把交互逻辑移到伪元素上：给
::before加content: ""+display: block+pointer-events: auto，再绑定事件（但需 JS 配合） - 更省事的做法：放弃伪元素做点击载体，用
background-image或内联svg，它们天然属于元素盒模型
rem/vw 单位在 iOS Safari 中的渲染偏差
用 rem 设按钮高度时，如果根字体大小靠 JS 动态计算（比如根据屏幕宽度设 document.documentElement.style.fontSize），iOS Safari 可能因渲染时机问题，导致按钮初始点击区域偏小——等字体生效后才扩大，中间几帧不可点。
稳妥方案：
- 根字体大小用纯 CSS 控制：
html { font-size: calc(100vw / 375 * 16); }（以 375px 屏为基准） - 避免在
DOMContentLoaded后再改font-size，JS 注入时机晚于样式计算 - 测试真机时重点看冷启动瞬间，模拟器容易掩盖这个问题
手指点不准从来不是手感问题，是热区没落在该在的位置。最常漏掉的，是把 touch-action 加在 wrapper 上，而不是按钮自己；还有人用 transform: scale() 缩小按钮再用 overflow: hidden 裁剪，结果热区跟着缩了——那不是优化，是自废武功。
