移动端按钮点击区域应≥44×44px，推荐用padding扩展并设min-width:44px兜底；慎用transform缩放和绝对定位偏移，需配合touch-action:manipulation确保热区准确。
移动端按钮点击区域太小的典型表现
用户反馈“点不中”“要戳好几次”，实际是 touchstart 事件未触发，或触发后立即被误判为滑动。这不是 CSS 渲染问题，而是浏览器对触摸目标尺寸的底层判定逻辑：iOS Safari 和 Android Chrome 都要求可点击元素的物理尺寸 ≥ 44×44pt（约 44×44px @1x），否则会自动放大点击热区或降级为 hover 行为——但不可靠。
用 padding 扩展点击区域最直接有效
给按钮加 padding 是最稳妥的方式，它同时增大内容区和可点击范围，且不破坏布局流。注意以下三点：
-
padding值建议用rem或px，避免用%（百分比 padding 在 flex 容器中可能异常） - 若按钮内含图标+文字，优先在上下左右都加足
padding，例如：padding: 12px 20px; - 慎用
padding-top/padding-bottom单独加大——可能导致文字垂直偏移，建议用line-height或flex居中配合
min-width 防止文字过短导致按钮过窄
当按钮文字只有“是”“否”“→”这类短内容时，即使有 padding，按钮宽度也可能不足 44px。此时 min-width 是必要兜底：
- 设
min-width: 44px;可满足最小触控标准；更稳妥可设min-width: 88px;（兼顾拇指操作容错） - 避免设死
width: 100px;——会强制拉伸、破坏响应式 - 若按钮是
inline元素（如），必须先加display: inline-block;或display: block;才能让min-width生效
别忽略 border 和 outline 的干扰
有些按钮加了 border: 1px solid #ccc; 后，视觉上变“细”了，用户下意识更难点准。还有开发者习惯加 outline: none; 去掉焦点框，结果在键盘导航或辅助设备下完全失去可访问性。
- 保留
outline，但可用outline-offset微调位置，例如：outline-offset: 2px; - 若必须去边框，改用
box-shadow: 0 0 0 2px rgba(0,0,0,.1);模拟轮廓，既保持视觉引导又不压缩点击区 - 检查是否意外设置了
transform: scale(0.9);类样式——缩放会等比缩小点击热区，必须用transform: scale(1);覆盖
真正难处理的是嵌套在 position: absolute 容器里、又被 transform 位移过的按钮，它的点击热区可能和视觉位置错开。这种场景得靠 touch-action: manipulation; 强制启用快速点击，并用 pointer-events: auto; 确保穿透无误——但前提是父层没拦截 touchstart。
