触摸区域必须 ≥44×44px，否则移动端点不中；iOS和Android无障碍规范明确要求最小触控目标为44×44 CSS像素，仅靠文字或font-size无法达标，须用padding+min-width/min-height+box-sizing:border-box组合保障热区完整。
触摸区域必须 ≥ 44×44px，否则移动端点不中
很多导航在手机上“点不动”，不是 JS 没绑事件，而是 a 标签的可点击热区太小。iOS 和 Android 的无障碍规范都明确要求：最小触控目标尺寸为 44×44 CSS 像素（非设备像素），否则手指容易误触或点空。
常见错误现象：a 只包了文字（如“首页”），没设 padding 或 min-width/min-height；用 font-size: 12px + 默认行高撑出的高度远低于 44px；父容器用了 overflow: hidden 裁掉 padding。
- 给每个
a显式设置padding: 12px 20px（上下 12×2 = 24px，不够？再加min-height: 44px并设display: flex; align-items: center垂直居中） - 避免只靠
line-height撑高——它不增加点击热区，仅影响文字垂直位置 - 如果导航项是图标按钮（如 hamburger），必须用
aria-label描述功能，否则读屏器无法识别 - 测试方法：真机打开 DevTools → 切到「Rendering」→ 勾选 “Show hit test areas”，看蓝色热区是否完整覆盖目标
别用 float 或 inline-block 布局导航项
浮动和内联块在触摸场景下会引入不可控间隙或塌陷，导致热区错位、点击偏移。比如 inline-block 元素间默认有空白字符（换行/缩进），CSS 里写 font-size: 0 或注释拼接又难维护；float 则需额外清除，父容器高度塌陷后 padding 失效，实际热区被裁切。
Flex 是当前唯一稳妥选择：它天然支持等分布局、基线对齐控制、自动换行（flex-wrap: wrap），且所有子项的尺寸计算清晰可预测。
- 导航容器设
display: flex; gap: 8px（比margin更稳，不会因 margin 合并失效） - 每个
li内部用display: flex包裹a，确保热区不被外边距干扰 - 移动端收起时，用
height: 0; overflow: hidden; transition: height 0.3s动画，比 JS 切 class 更轻量、更顺滑
nav 标签不是摆设，它直接影响触摸行为识别
很多人把 nav 当成带默认 margin 的 div，其实它会触发浏览器对导航区块的特殊处理逻辑——比如 Safari 在长按链接时，会优先识别 nav 内的 a 并提供“在新标签页打开”菜单；部分安卓 WebView 也会据此优化点击延迟（300ms click delay 的绕过机制更可靠）。
容易踩的坑：nav 里塞搜索框、登录按钮、广告 Banner —— 这些不属于“导航”，会导致语义混乱，辅助技术可能跳过真正链接，或把非交互元素当可点区域误判。
- 每个页面最多放 2–3 个
nav：顶部主菜单、侧边分类、页脚快捷链接 - 不要嵌套
nav，读屏器可能报错或跳过子项 - 若导航纯图标无文字，必须加
aria-label="打开菜单"，否则系统无法将点击意图映射到语义动作
响应式断点下热区尺寸不能“一刀切”
桌面端用 padding: 14px 24px 没问题，但小屏下字体缩小、视口变窄，若还保持同样 padding，可能让相邻项热区重叠或溢出容器边界，造成误触。更麻烦的是，某些安卓机型对密集小热区的防误触策略会主动丢弃连续点击。
解决方案不是减 padding，而是用媒体查询动态调整热区密度与尺寸。
- 在
@media (max-width: 768px)下，把a的padding提升到16px 28px，同时限制最大宽度（max-width: 100%）防溢出 - 用
touch-action: manipulation告诉浏览器“这个区域只做点击/滑动”，能缩短 iOS 上的点击延迟 - 避免在
a上同时设hover和active状态样式——移动端没有 hover，且 active 状态持续时间极短，视觉反馈几乎不可见
真正卡住人的从来不是“怎么写导航”，而是“为什么点了没反应”。热区尺寸、语义标签、布局模型这三者一旦错配，调试时就会陷入 JS 是否执行、CSS 是否生效、事件是否冒泡的循环怀疑。先确保 a 本身可点、热区够大、结构干净，再往上加交互逻辑，才不至于把时间耗在定位底层失灵上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
