pwa 中优化移动端触摸响应延迟的关键是通过 viewport 配置禁用双击缩放并设置 touch-action: manipulation。需完整声明 viewport 属性，优先使用原生 button 元素，确保触摸目标≥44×44pt（ios）或 48×48px（android），利用 padding 扩展热区。
PWA 中优化移动端触摸响应延迟，核心不是改 JavaScript，而是告诉浏览器“这里不需要等待双击缩放”。300ms 延迟是浏览器默认行为，JS 本身不卡，但交互链路被阻塞了。
viewport 必须完整声明
缺一不可：
-
width=device-width（让布局视口匹配设备独立像素） -
initial-scale=1.0（避免 iOS 4.4 以下兼容问题） -
maximum-scale=1.0（配合user-scalable=no使用，禁止单独写user-scalable=no，否则违反 iOS 访问性规范） -
viewport-fit=cover（全面屏设备防止底部黑边）
示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
按钮元素优先用原生 <button></button>
不用 <div onclick="..."> 或 <code><span></span> 模拟按钮。原生 <button></button> 自带 touch-action: manipulation 行为，且语义正确、可访问性强。若必须用自定义标签，需手动加 CSS：
.custom-btn {
touch-action: manipulation;
}
确保触摸目标尺寸达标
iOS 推荐最小 44×44pt，Android 建议 ≥48×48px。注意：这是 物理触摸区域，不是视觉大小。可用 padding 扩展点击热区，不改变外观：
.button {
min-width: 48px;
min-height: 48px;
padding: 12px; /* 内边距扩大实际可触区域 */
}
现代浏览器直接启用 manipulation
Chrome 36+、iOS Safari 9.3+ 支持 touch-action: manipulation，它会跳过双击判断逻辑，实现即时响应。无需 JS 干预，纯 CSS 即生效。
不复杂但容易忽略
