按钮点击区域小的根本原因是实际可触区域低于44px×44px，需用padding扩展热区、显式设置display和touch-action: manipulation，并确保语义化使用标签。
按钮点击区域小，根本不是“没放大”，而是尺寸没达标
移动端按钮点击区域小，90% 的情况不是样式丑或 JS 慢，而是实际渲染出的可触区域远低于 44px × 44px（W3C 推荐值）甚至 48px × 48px（iOS/Android 无障碍规范）。font-size: 16px 不等于按钮够大——文字撑开的宽度常不足 30px，padding 又被重置或继承为 0。
检查方式：打开 Chrome DevTools → Elements 面板 → 选中按钮 → 看「Computed」里的 width、height、padding、border 是否真实生效；特别注意 display 类型是否为 inline（旧版 Safari 中 padding-top/bottom 可能失效）。
- 优先用
padding扩展热区，而非固定width/height，兼顾文字长度变化和响应式 - 显式声明
display: inline-block或display: block，避免inline带来的垂直热区缩水 - 若按钮内含 SVG 或图标字体，确认父容器未设
vertical-align: baseline导致基线偏移 - Flex/Grid 容器中，避免父元素设
flex: 1或width: 0，否则min-width可能被忽略
touch-action: manipulation 必须精准加在按钮上，不能设在 body
touch-action: manipulation 是当前最轻量、最可靠的无延迟解法，但它不是全局开关——它只对明确有点击意图的元素生效。设在 html 或 body 上，会导致整个页面无法滚动；设在 div 容器上，又可能覆盖子按钮行为。
原生可点击元素（<button></button>、<a></a>、<input type="button">）默认已有该行为，除非你显式写了 display: inline 或 touch-action: auto。
- 只加在具体按钮上：
button { touch-action: manipulation; } - IE10/11 需补前缀：
-ms-touch-action: manipulation; - 别和
FastClick共存——两者机制冲突，共存后常见按钮无响应或事件重复 - 控制台输入
window.FastClick若返回构造函数，说明还在运行，应直接删掉初始化代码
viewport meta 标签不完整，300ms 延迟照常发生
仅写 <meta name="viewport" content="width=device-width"> 是无效的。iOS Safari 9.2 及更早版本、UC/QQ 浏览器旧版仍会等待双击缩放判定，卡满约 300ms。关键在于浏览器需要明确的缩放锚点，initial-scale=1.0 是触发优化的硬性条件。
另外，user-scalable=no 或 maximum-scale=1.0 才真正禁用双击缩放判断；minimum-scale=1.0 单独无效，拼错成 minimun-scale 会导致整个 meta 失效。
- 标签必须静态写在
内，动态插入或放在里解析失败 - 若需保留图片双指放大能力，就不能用
user-scalable=no，得靠touch-action补位 - PWA 添加到主屏幕后，仍需按钮级
touch-action保障无延迟
语义化缺失会让按钮“看不见”，不只是点不着
用 <div class="btn"> 替代 <code><button></button>，看似功能一致，实则让 VoiceOver 和 TalkBack 无法识别其为可交互控件。屏幕阅读器不是靠视觉定位按钮，而是解析 DOM 语义结构生成导航树。伪按钮常被跳过，或读作“静态文本”，手指点下去毫无反馈。
DOM 深度也直接影响响应稳定性：超过 6 层嵌套时，touchstart 事件冒泡路径变长，低端安卓设备实测延迟可达 42ms；三层结构则稳定在 8–12ms。
- 必须用
<button></button>替代所有带点击行为的<div>，哪怕只是执行 <code>onclick="toggleMenu()" -
<label></label>必须显式包裹<input type="checkbox">或使用for关联，否则点击文字区域无法触发切换 - 避免
role="button"伪装——它不支持 keyboard focus、不触发:active、在部分 WebView 中完全无效 - 用 DevTools 右键元素 → “Show DOM properties” 查看
depth值，超 6 就该重构
实际项目里最容易被忽略的，是语义化与尺寸控制的耦合：一个
<button></button> 标签本身不保证可触区域达标，它只是起点；而一个写对了 padding 和 touch-action 的 <div>，依然会被辅助技术绕过。两者缺一不可。</div>
