移动端按钮点击延迟需从事件触发路径、语义标签、touch-action和viewport四方面解决；必须用等原生可点击元素，确保触控尺寸≥44×44px，正确设置touch-action:manipulation及viewport meta。

移动端按钮点击延迟不是样式问题，而是浏览器事件机制和 HTML 结构共同决定的；单纯调 CSS 动画或 hover 效果无法消除 300ms 延迟，必须从事件触发路径、语义标签、touch-action 和 viewport 配置四方面入手。

为什么比

点起来快又准

原生 <button></button> 自带焦点管理、键盘支持（Enter/Space 触发）、:active 样式通道，且默认触控热区 ≥44×44px；换成 <div class="btn"> 后，浏览器不认为它是可交互元素，<code>touchstart 必须手动绑定，Safari 还可能跳过 :active 渲染。

• 必须用 <button></button>、<a></a>、<input type="button"> 承载点击行为，哪怕只写 onclick="doSomething()"
• 禁用 role="button"：它不自动获得焦点、不响应 Enter/Space、在部分安卓 WebView 中完全失效
• 若需样式隔离，用 button { all: unset; } 重置后再写样式，别用 div + JS 模拟
• 确保触控目标尺寸达标：用 min-width: 44px; min-height: 44px; 强制，CSS 像素 ≠ 物理可触区域

touch-action: manipulation 要加在哪儿才生效

touch-action: manipulation 是目前最轻量、兼容性最好的解法（iOS 9.3+、Chrome 36+），但它只对“有点击意图的容器”起作用，加错位置反而破坏滚动。

• 只加在明确承载点击行为的元素上，比如 <button class="primary"></button> 或 React 中包裹 onClick 的 wrapper
• 原生可点击元素（<button></button>、<a></a>、<input>）默认已优化，除非你写了 touch-action: none 或 display: block 覆盖了默认行为，否则不用加
• 绝对不要加在 或 上——会意外禁用页面纵向滚动
• iOS PWA（添加到主屏幕后）有时仍保留延迟，此时必须显式加 touch-action: manipulation 到按钮样式里

viewport meta 标签怎么写才真正起效

加了 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 不够，必须明确关闭双击缩放能力，浏览器才会跳过 300ms 判断窗口。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 标准写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
• 如果页面需要用户缩放（如图文页、PDF 预览），不能用这个方案；改用 touch-action: manipulation + touchstart 组合
• 注意：部分旧版 Android WebView 对 user-scalable=no 支持不稳定，建议搭配 touch-action: manipulation 双保险
• 真机测试时，打开 Safari 开发者工具 → “开发者”菜单 → 查看当前页面是否识别为“可缩放”，若显示“Zooming disabled”，说明生效

样式控制里最容易被忽略的 DOM 深度问题

DOM 嵌套过深会让 touchstart 事件冒泡路径变长，实测 6 层比 3 层平均多 30ms 延迟——而人对“即时反馈”的容忍阈值是 100ms。

• 用 Chrome DevTools → Elements 面板右键任意元素 → “Show DOM properties” 查看 depth 值，超过 6 就该重构
• 砍掉无意义包裹层：比如只为加 class 套的 <div>，改用 <code>display: contents（Safari 15.4+ 支持）抹除渲染但保留语义流
• 导航结构控制在 <nav> > <ul> > <li> > <a></a> </li> </ul></nav> 这类 4 层以内，避免 <nav> > <div> > <section> > <article> > <div> > <a> 这种 6+ 层嵌套 <li>动态插入菜单项时，用 <code>DocumentFragment 批量 append，别循环 appendChild——每次调用都可能触发 layout

真正卡顿的从来不是 JS 执行慢，而是事件从手指落到屏幕，到 handler 执行之间，被 DOM 深度、非语义标签、错配的 touch-action 和缺失的 viewport 一层层拖住。修复顺序应该是：先换 <button></button>，再查 depth，然后加 touch-action: manipulation，最后核对 viewport —— 任何一步漏掉，都可能让优化失效。