移动端菜单点击无响应，八成是 document.queryselector id 选择器错误（如 #mobile=menu 误写为 #mobile-menu），导致返回 null、事件未绑定且静默失败；需比对 html 实际 id 并用 console.assert 验证。
document.querySelector 选错 ID 就完全失效
菜单点不动，八成是 JavaScript 根本没绑上事件——最常见的是 document.querySelector 里写的 ID 和 HTML 中实际 ID 对不上。比如 HTML 里写的是 id="mobile-menu"，JS 却查 "#mobile=menu" 或 "#mobile_menu"，结果返回 null，后面 addEventListener 直接静默失败，控制台还不报错。
- 用浏览器开发者工具检查元素真实 ID，再逐字比对 JS 中的字符串
- 加一句
console.assert(menu, "❌ #mobile-menu not found")，一刷新就知道有没有查到 - 别依赖
?.addEventListener掩盖问题——它只是防止报错，不解决绑定失败本身
点击后闪一下就消失，其实是表单默认行为在捣鬼
按钮是 <button></button> 但没设 type="button"，或是 <a href="#"></a> 没调 event.preventDefault()，点击瞬间触发页面跳转或表单提交，菜单刚 show 就被重置。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 把触发按钮明确写成
<button type="button" class="hamburger"></button> - 如果是链接，JS 里必须写
e.preventDefault()：menu.addEventListener("click", e => { e.preventDefault(); ... }) - 用
console.log("clicked")确认回调是否执行，如果只打一次又消失，基本就是这个原因
iOS Safari 点不中，不是代码问题而是触摸热区没达标
元素渲染出来了，JS 也绑好了，但手指点下去没反应——iOS WebKit 对可交互区域有硬性要求：最小尺寸不足 44×44px、伪元素没设宽高、父容器 overflow: hidden 裁掉了部分区域，都会导致 touch 事件被丢弃。
- 给汉堡图标加
min-width: 44px; min-height: 44px（苹果人机指南最低推荐值） - 如果用
::before画图标，确保它有width/height或padding，不能只靠content: "" - 检查父层是否用了
transform移出视口又没配overflow: visible，裁掉的部分无法响应触摸
:active 样式不生效，得先让 iOS “认出”这是个可点区域
CSS 的 :active 在 iOS 上经常不触发，不是写法错，而是浏览器为双击缩放留了 300ms 延迟，期间不更新激活态。单纯改样式没用，得主动告诉系统“这里要响应触摸”。
- 全局只加一次：
document.body.addEventListener('touchstart', () => {}, { passive: true }); - 别漏掉
{ passive: true }，否则 iOS 11+ 会警告甚至禁用监听器 - 这个监听器必须用
addEventListener，写在 HTML 的ontouchstart属性里不可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
