触摸目标必须≥44×44px，需显式设置min-width/min-height、确保label包裹checkbox、控制dom深度≤6层、配置html{overscroll-behavior:none}+body{touch-action:none}。
触摸目标必须 ≥ 44×44px，不能只靠视觉“看起来够大”
很多导航在设计稿里按钮看着挺宽，一上真机就点不准——根本原因是 CSS 像素尺寸 ≠ 实际可触区域。line-height 挤压、padding 不足、父容器 overflow: hidden 裁剪内容，都会让热区缩水。
必须显式设 min-width: 44px 和 min-height: 44px，而不是仅依赖内边距；a 或 button 必须是 display: block 或 inline-block，否则行内元素的点击区上下会塌陷。
- 用 Chrome DevTools 的「Toggle device toolbar」+ 「Emulate touch events」实测，别信模拟器渲染
- iOS Safari 对
min-height更敏感，Android 则更依赖padding，双端都兜底才稳 - 如果菜单项文字过长导致自动换行，要配合
white-space: nowrap+overflow: hidden+text-overflow: ellipsis防热区错位
汉堡菜单的 input[type="checkbox"] 必须被 label 包裹且触发区 ≥ 44px
纯 CSS 实现汉堡菜单的核心是 input[type="checkbox"] 状态切换，但若 label 没包裹它，或 for 关联错误，点击文字区域就无法触发 checkbox 变化——JS 加载失败时整个菜单直接不可用。
label 是唯一能放大原生表单控件触控区的合法方式，iOS 要求最小点击区 ≥ 44px，所以 label 必须设 min-height: 44px 并确保内边距撑满。
- 结构必须是
<label><input type="checkbox">菜单</label>，不能把input放在外面再用for关联（部分 WebView 不识别） - 别给
input设opacity: 0或visibility: hidden后再用label控制——这会导致焦点管理断裂 - 用
pointer-events: none在input上是安全的，但必须保留在label上有完整交互能力
nav 内部 DOM 深度不能超过 6 层，否则 touchstart 延迟飙升
语义标签不是摆设：nav > ul > li > a 这种 4 层结构，touchstart 到 JS handler 平均延迟 12ms；一旦变成 nav > div > div > ul > li > div > a（7 层），低端安卓设备上延迟直接跳到 42ms 以上，手指点下去明显卡顿。
Chrome DevTools → Elements 面板右键任意元素 → 「Show DOM properties」可查 depth 值。超 6 就该砍掉无意义包裹层。
- 禁用为加 class 而套的
div，改用display: contents（Safari 15.4+ 支持）抹除渲染层但保留语义流 - 动态插入菜单项时，用
DocumentFragment批量append，避免循环appendChild触发多次 layout - 别在
nav外再包一层div class="header-wrapper"——nav本身已具备语义与布局能力
子菜单展开时背景滚动穿透，overflow: hidden 不是解法
菜单弹出后用户滑动空白处，背景页还在滚——这不是 bug，是 body { overflow: hidden } 引发的副作用：页面重排、焦点丢失、iOS Safari 滚动条消失后无法恢复。
真正有效的组合是 html { overscroll-behavior: none } + body { touch-action: none }，既阻断透传，又不破坏滚动状态。
- 测试重点：iOS 上弹出菜单后快速两指滑动，确认背景完全静止，且关闭菜单后滚动位置能自然恢复
- 如果用了
position: fixed锁 body，记得记录window.scrollY，关闭时手动window.scrollTo(0, savedY) - 别对
html或body直接设height: 100vh，这会导致 iOS Safari 滚动条消失且无法唤出
nav 内部的 DOM 深度和 html 级的 overscroll-behavior 配置——前者影响触控响应即时性，后者决定滚动是否“粘住”。这两处不调，其他优化都是补丁。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
