表单按钮在手机上点不中，主因是ios safari要求触控目标≥44×44px且需同步设置display、box-sizing、min-width/min-height及touch-action: manipulation，否则padding区域被裁切或忽略。
直接加 padding + min-height + touch-action: manipulation 就能解决 90% 的触控失灵问题，但必须同步处理 box-sizing、display 和父容器干扰，否则真机上点不中。
为什么表单按钮在手机上总点不中
不是 JS 绑定失效，也不是样式没生效，而是浏览器对可点击区域有隐式门槛：iOS Safari 默认要求触控目标 ≥44×44px，低于这个尺寸就可能忽略 touchstart；Android WebView 同样对 input[type="submit"] 或自定义 button 的 padding 区域响应不稳定。常见诱因包括：
-
button或input是默认display: inline，padding不生效 - 没设
box-sizing: border-box，padding导致整体宽度超标，被父容器overflow: hidden裁掉 - 按钮嵌在轮播图、抽屉弹层等设置了
touch-action: none的容器里，事件被直接拦截 - 用了
transform: scale()缩小图标按钮，但没同步放大min-width/min-height补偿坐标偏移
表单按钮触控区的最小安全配置
别只写 padding: 12px 16px——它必须和三个属性配对才真正起效：
-
display: block或display: inline-block（对a标签尤其关键） -
box-sizing: border-box（全局统一，避免不同组件盒模型错乱） -
min-width: 44px; min-height: 44px（兜底，防止文字短或图标小时 padding 被压缩）
推荐组合写法：
button, input[type="submit"], input[type="reset"] {
display: inline-block;
padding: 12px 16px;
min-width: 44px;
min-height: 44px;
box-sizing: border-box;
touch-action: manipulation;
}
注意：min-width/min-height 不能用媒体查询随屏幕缩小而降低——44px 是硬性下限，缩字体可以，缩热区不行。
哪些地方容易漏掉导致失效
真机测试时如果蓝色高亮框没包住 padding 区域，大概率是以下某处断链了：
-
touch-action: manipulation没加在按钮自身，而是加在父div或form上（无效） - 父容器有
overflow: hidden或transform，把padding区域裁掉了（用outline: 1px solid red快速验证实际响应边界） - 按钮含
img或svg，子元素写了touch-action: none，阻止事件冒泡 - 用了
user-select: none却忘了加-webkit-tap-highlight-color: transparent，某些安卓 WebView 下会抑制点击
伪元素扩热区只在视觉受限时用
比如导航栏里的三横线菜单按钮，加 padding 会撑高整个导航条——这时才考虑 ::before 向外延伸：
- 真实按钮必须设
position: relative - 伪元素要
content: ""+position: absolute+inset: -12px（比top/left/right/bottom更稳） - 伪元素必须显式设
pointer-events: none（不是auto），否则它会挡事件 - 务必真机多环境验证，iOS Safari 对
::before的触摸支持保守，模拟器不准
优先级永远低于 padding + min-size + touch-action 组合。别一上来就写伪元素——它只是视觉妥协方案，不是通用解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
