优先用padding（如12px 20px）扩展点击热区，配合display: inline-block/block、box-sizing: border-box、min-width/min-height≥44px，并排查overflow、touch-action、pointer-events等干扰。
按钮点击区域太小，用户老点不中
移动端按钮默认尺寸往往只有文字撑开的大小，实际可触区域远低于 W3C 推荐的 44px × 44px 最小触控目标。这不是“看起来小”，而是真·点不中——尤其在拇指操作时误触率飙升。
- 显式设置
padding（如padding: 12px 20px），别只靠font-size去“撑”按钮；min-width和min-height必须同时设为 ≥44px - 检查
display：若按钮被设成inline，部分旧 WebView 会忽略padding-top/padding-bottom，改用inline-block或block - Flex/Grid 容器里要警惕：父级设了
flex: 1或width: 0时，min-width可能被强制压缩失效，加flex-shrink: 0锁住尺寸 - 图标按钮需额外注意：内部
svg或字体图标若没占满容器，或父元素设了vertical-align: baseline，会导致视觉点击区偏移
双击按钮触发页面缩放
iOS Safari 和现代安卓浏览器已完全无视 user-scalable=no，单靠 <meta name="viewport"> 标签根本拦不住双击放大——它不是配置错了，是浏览器主动弃用了这个字段。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">必须静态写在最早位置，JS 动态插入无效 - 真正起效的是
maximum-scale=1.0+minimum-scale=1.0组合，但前提是页面没有内容溢出（document.documentElement.scrollHeight > window.innerHeight），否则 iOS Safari 仍会放开缩放 - 给按钮本身加
touch-action: manipulation（不是 body、不是 html），例如：button, .btn { touch-action: manipulation; }—— 它跳过双击判断逻辑，既消 300ms 延迟，也顺带阻止双击缩放 - 必须配合 JS 拦截：
document.documentElement.addEventListener('gesturestart', e => e.preventDefault(), { passive: false });和document.documentElement.addEventListener('dblclick', e => e.preventDefault(), { passive: false });，{ passive: false }是硬性要求，否则preventDefault()在 iOS/Chrome 中静默失败
按钮状态反馈弱，用户不确定点没点上
移动端没有 hover，:hover 基本失效；而 :active 在部分 Android WebView 中响应滞后或不触发，仅靠 CSS 伪类无法可靠传达点击已发生。
- 禁用
-webkit-tap-highlight-color: transparent时，必须补足padding并搭配视觉反馈（如背景色微变、轻微transform: scale(0.98)），否则用户无感知，会反复猛戳 - 避免全局写
* { touch-action: manipulation; }—— 轮播图横向滑动、地图拖拽、图片双击放大全都会失效 - 若按钮内含异步操作（如提交表单），立即置
disabled并切换文字（如 “提交中…”），防止重复点击；恢复时别只靠定时器，应监听接口返回或formdata事件 - 语义不能丢：永远用
<button type="button"></button>，不用<div onclick> —— 后者不支持空格键触发、无焦点管理、屏幕阅读器无法识别<h3>按钮在 Flex/Grid 布局里被意外截断或圆角消失</h3> <p>当按钮嵌套在弹性布局中，<code>overflow: hidden的父容器或未重置的border-radius层叠，常导致圆角被裁切、阴影被剪掉、甚至点击热区缩水。- 检查父容器是否设了
overflow: hidden：它会裁掉按钮的box-shadow和超出边界的圆角，改用overflow: visible或给父级加足够padding -
border-radius不会自动继承，若按钮子元素（如图标）设了border-radius，可能覆盖父级样式；统一在button上声明，并确保子元素不设相反值 - Flex 容器中若按钮设了
margin，某些 Android WebView 会忽略；改用padding或外层包裹<div> 控制间距<li>使用 <code>clip-path实现非矩形按钮时，务必测试各机型兼容性——iOS Safari 对clip-path: polygon()支持不稳定，建议降级为border-radius或 SVG
真实项目里最易被忽略的，是 viewport 标签的位置 和 touch-action 的作用域：一个写在 JS 里动态插入，一个挂在 body 上幻想全局生效，结果双击缩放照常发生，而你还在查 CSS 有没有拼错。
- 检查父容器是否设了
