移动端点击区域需≥44×44px，仅靠font-size无效，须用padding显式扩展；推荐padding: 12px 16px且min-width: 44px；禁用white-space: nowrap防溢出；优先用pointerdown替代click消除300ms延迟；viewport需含user-scalable=no或maximum-scale=1；下拉菜单设touch-action: pan-y而非none；菜单开启时用overscroll-behavior: none+记录并恢复scrollY保障滚动体验。

移动端点击区域太小导致误触

很多横向导航栏在手机上点不中，不是代码写错了，是默认 a 或 button 的可点击区域只有文字大小。iOS 推荐最小热区是 44×44px，安卓也类似。光靠 font-size 撑不开，必须用 padding 显式扩展。

实操建议：

立即学习“前端免费学习笔记（深入）”；

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给每个导航项加 padding: 12px 16px（上下留出空间，左右保证宽度），再配合 min-width: 44px
• 避免只对文字设 line-height，它不扩大点击范围
• 别用 white-space: nowrap 包整个 nav，小屏会横向溢出，用户得左右拖才能点到最右项

300ms 点击延迟让菜单“卡一下”

直接绑定 click 事件，在 iOS Safari 和老版安卓 WebView 里会有明显延迟，尤其连点展开子菜单时容易失焦或跳页。这不是 bug，是浏览器为双击缩放预留的判断窗口。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 改用 pointerdown 替代 click，无延迟、兼容触控/鼠标/笔，且不影响键盘操作（Enter/Space 仍可用）
• 确保 <meta name="viewport"> 里有 user-scalable=no 或 maximum-scale=1，现代浏览器才真正关闭双击检测
• 如果非用 touchstart，记得加 { passive: false }，否则 preventDefault() 失效

触摸手势冲突：菜单打不开或滚不了

常见做法是给下拉菜单容器加 touch-action: none，结果发现手指一划菜单没反应，甚至整个页面都拖不动了——因为 none 禁用了所有原生手势，包括滚动和点击。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 下拉菜单（含可滚动列表）设 touch-action: pan-y，允许上下滑动，禁掉缩放和左右拖拽
• 横向导航项本身别设 touch-action，保持默认行为；设了反而可能让 click 失效
• 真机测试方法：两指快速上下滑菜单区域，看是否透传到底部页面；透传说明 touch-action 没生效或值不对

菜单弹出后背景还能滚，体验断裂

很多人给 body 加 overflow: hidden 锁背景滚动，但 iOS Safari 会丢掉滚动条状态，关菜单后页面卡在中间；更糟的是，用户在菜单里滑到底松手，惯性还会带动背景滚动。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 菜单打开时，给 html 加 overscroll-behavior: none，阻断滚动链透传
• 同时给 body 加 touch-action: none，防空白区误触滚动
• 记录打开前的 window.scrollY，关闭时用 window.scrollTo(0, savedY) 恢复，别依赖 CSS 强制锁死

关键点不在“怎么让菜单动起来”，而在“怎么让手指知道它该往哪动、动了以后页面不会乱”。很多问题表面是样式或 JS 写法，根子是没区分清楚「手势意图」和「交互目标」。