页面震动需在用户手势（如touchstart）同步上下文中调用navigator.vibrate([60])，不可异步延迟；iOS不支持该API，须降级为视觉反馈与可访问性增强；震动必须与标签切换逻辑同事件内执行且前置，确保节奏一致。
页面震动不是标签页切换的默认行为，必须手动绑定用户手势
HTML 本身不提供「标签页切换时震动」的语义或 API。所谓“震动”，实际是调用 navigator.vibrate()，而这个 API 只能在用户真实触摸或点击的同步上下文中触发——不能靠 click 事件监听器里异步执行，也不能在 hashchange、popstate 或状态更新后延迟调用，否则静默失败。
常见错误现象：
– 给标签按钮绑了 onclick="navigator.vibrate([50])"，但没加 return false 或 e.preventDefault()，结果震动没响、页面还跳了锚点；
– 在 Vue 的 @click 或 React 的 onClick 回调里写 setTimeout(() => navigator.vibrate(...), 0)，完全无效；
– 误以为监听 window.addEventListener('beforeunload', ...) 能覆盖 tab 切换，其实它对内部导航毫无反应。
- 必须用
touchstart或click（注意：iOS 上click延迟高，优先选touchstart） - 震动参数建议用短脉冲，如
[60]（单次 60ms），避免传[0]（清队列，无感）或超长序列（部分安卓机型截断） - 调用前务必检查支持性：
if ('vibrate' in navigator && navigator.vibrate)，否则 iOS 会直接跳过，且不报错 - 不要在切换逻辑完成后再震动——比如等
tab-content动画结束才震，用户已经感知不到关联性
怎么让震动和标签切换真正同步，而不是“震完了才切”
关键不是“先切再震”，而是把震动作为切换动作的一部分，在 DOM 状态变更前触发，并确保视觉反馈与震动节奏一致。否则用户会感觉震动脱节、像随机抖动。
实操建议：
– 在标签按钮的 touchstart 事件中立即调用 navigator.vibrate([60])，**不等待任何异步操作**；
– 同时给按钮加 :active 样式（如 transform: scale(0.98) + background-color: #eee），弥补 iOS 无震动时的触觉缺失；
– 切换内容的 JS 逻辑（比如设 panel.hidden = false 或增删 active 类）放在同一事件回调里，但放在震动调用之后，保证顺序可控；
– 避免高频连点导致震动堆叠：系统本身会节流，无需额外防抖，但别在 transitionend 里重复触发。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
btn.addEventListener('click', () => { showTab(); setTimeout(() => navigator.vibrate([60]), 10); }); - 正确写法：
btn.addEventListener('touchstart', (e) => { e.preventDefault(); navigator.vibrate?.([60]); showTab(); }); - 如果用
click兜底（比如桌面端），记得加e.preventDefault()防止<a href="#">滚顶
为什么 iOS 用户永远收不到震动，以及该怎么应对
iOS Safari 完全不支持 navigator.vibrate()，调用返回 undefined 或静默忽略，且不会抛错。这不是 Bug，是 Apple 的明确限制。试图用音频模拟震动（播放 100Hz 短音）属于反模式：耗电、干扰、违反可访问性原则，且多数用户已关闭媒体自动播放。
唯一合理路径是分层降级：
– 有震动能力时：震动 + 视觉缩放 + 文案微提示（如 tooltip 弹出“已切换”）；
– 无震动能力时（含 iOS）：仅保留视觉反馈 + 焦点移动（newPanel.focus()）+ 可访问性属性更新（aria-live="polite"）；
– 若页面启用了减少动画偏好（matchMedia('(prefers-reduced-motion: reduce)')），连视觉缩放都应跳过。
- 检测逻辑要双保险：
const canVibrate = 'vibrate' in navigator && typeof navigator.vibrate === 'function'; - 别依赖
userAgent判断 iOS——有些 iPadOS WebView 可能返回 desktop UA，但依然不支持 vibrate - 震动不是装饰，而是语义强化：只在“确认切换将丢弃未保存数据”这类高风险操作中启用，否则用户很快会无视
震动容易被忽略的兼容细节
震动生效的前提比想象中更苛刻。很多看似正常的代码在线上真机跑不通，问题往往出在环境或上下文上。
- Chrome 96+ 要求页面处于前台活跃态；若用户切到其他标签再回来，首次震动需重新由用户手势触发（不能靠定时器补）
- 某些国产安卓 WebView（如 QQ 浏览器 X5 内核）调用
navigator.vibrate()返回true，但实际无震动，必须真机测试 - 如果标签页切换靠
history.pushState()实现，震动必须放在 pushState 调用之前，否则浏览器可能已开始导航流程，震动被丢弃 - 震动无法在 iframe 中跨域调用；若标签页逻辑嵌在第三方 iframe 里，父页需透传手势事件并桥接震动
真正难的不是让代码“跑起来”，而是让每次震动都落在用户预期的交互节奏里：它得比视觉切换略早一点点，又不能早到让用户困惑“我点的是哪个”。这种毫秒级的协同，只能靠真机反复测，没法靠模拟器蒙混过关。
