触控目标小于44×44px会导致误点、连点或无响应；须用label包裹input并设min-width/min-height，禁用干扰CSS属性，真机实测验证。
触控目标太小会导致什么问题
用户在手机上点不中 input、label 或按钮，尤其在 iOS Safari 和 Android Chrome 上频繁触发「误点」「连点」或根本无响应。这不是样式错觉，是 WCAG 2.1 和 Apple/Google 的人机交互规范明确要求：最小触控区域必须 ≥ 44×44px（iOS）或 ≥ 48×48dp（Android）。低于这个尺寸，系统可能截断事件、降权点击判定，甚至强制放大页面——反而破坏布局。
直接给 input 加 padding 不够用
单纯增大 input 元素自身的 padding，对 type="checkbox" 或 type="radio" 几乎无效——它们的可点击热区仍卡在原生控件大小。真正有效的做法是把可点击区域「外扩」到包裹容器上：
- 用
label包裹input，并给label设置min-width: 44px; min-height: 44px; -
label内部用display: flex; align-items: center;垂直居中，避免文字挤占触控空间 - 禁用
input自身的margin或transform: scale()，否则会偏移热区坐标 - 对
type="submit"按钮，优先设min-height: 44px，而非只靠font-size推高行高
touch-action 和 user-select 会影响触控判定
这两个 CSS 属性看似无关，实则干扰底层事件分发：
-
touch-action: none会彻底禁用浏览器默认触控行为，包括点击穿透和长按识别，慎用于表单控件 -
user-select: none在部分 Android WebView 中会意外抑制click事件冒泡，导致label点击失效 - 如需禁用选中，改用
-webkit-user-select: none+-moz-user-select: none，但保留标准属性为text - 测试时务必在真机开启「辅助功能 > 触控调节」，观察是否出现「点击延迟」或「双击才触发」
响应式下触控目标容易被缩放破坏
用 vw 或 % 设置宽度时，小屏下 44px 可能被压缩成物理像素不足的区域。更稳妥的方式是：
立即学习“前端免费学习笔记（深入）”；
- 用
min-width: 44px+min-height: 44px，而非固定width/height - 避免在
@media (max-width: 480px)中缩小font-size导致line-height收缩，间接压扁按钮高度 - 对
input[type="range"]这类滑块，触控目标不是滑块本身，而是整个track区域——需用::-webkit-slider-runnable-track扩展高度 - 使用
viewport元标签时，确保没有maximum-scale=1.0锁死缩放，否则用户无法手动放大确认目标
最常被忽略的是：触控目标尺寸检查不能只看设计稿或桌面模拟器，必须在真机 Chrome DevTools 的「Rendering > Emulate touch events」关闭状态下实测点击反馈。很多「看起来够大」的元素，在手指按下瞬间就因坐标偏移而失焦。
