如何通过 navigator.vibrate() 为网页中关键点击交互添加具有物理触感的震动反馈

vibrate 可用需同时满足：typeof navigator.vibrate === 'function' 且在用户手势事件（如 click）中调用；iOS 不支持，后台或非可见页静默失效；推荐 navigator.vibrate(150)，避免数组兼容问题。

不能直接用 navigator.vibrate() 就生效 —— 它必须在用户真实手势中调用，且 iOS 全面不支持，否则静默失败。

如何安全检测并判断 vibrate 是否真可用

只写 'vibrate' in navigator 会误判：iOS Safari 返回 true，但实际调用无效。必须叠加类型检查：

• typeof navigator.vibrate === 'function' 是唯一可靠判断方式
• 即使通过该检查，首次调用仍需由 click、touchend 等用户手势事件触发，setTimeout 或 Promise 回调里调用会直接丢弃
• 后台标签页、页面被切换（document.visibilityState !== 'visible'）时也会静默失效

震动参数怎么传才稳定有效

单数字最稳妥，数组易踩兼容性坑：

• 推荐用 navigator.vibrate(150)：Android 主流浏览器响应快，用户感知清晰
• 避免 [100, 50, 100] 这类短间隔组合 —— 部分低端 Android 设备无法解析停顿，合并成一次长震
• 数组必须偶数长度（震/停交替），总项数 ≤ 10，总时长 ≤ 5000ms；超限整条调用被忽略，不报错
• 传 0 或 [] 可清空当前震动队列，但通常没必要主动调用

关键点击交互中如何嵌入震动而不翻车

震动不是独立动作，必须绑定到可感知的交互闭环里：

• 仅在 button、switch、form submit 等明确由用户触发的操作末尾调用，比如 onclick 处理函数最后
• 不要在 scroll、input、hover 或自动轮播中触发 —— 违反手势前提，必失效
• 必须搭配降级方案：matchMedia('(prefers-reduced-motion: reduce)') 匹配时跳过震动；iOS 或检测失败时改用 CSS 抖动动画或轻量音效
• 震动时长建议控制在 10–150ms：过短难感知，过长（如 >300ms）易引起不适或被系统截断

真正容易被忽略的是「用户手势上下文」这个硬性前提 —— 它不是可选优化，而是浏览器强制策略。哪怕所有检测都通过，只要调用栈里没有真实的 click/touchend 事件路径，震动就永远不会发生。