最可靠方式是用户手势触发的按钮点击事件中直接调用 navigator.vibrate()，需检测兼容性并降级为视觉反馈，iOS 限单值≤200ms且首次需手势激活，Android 支持数组但受厂商限制。
直接在按钮点击事件里调用 navigator.vibrate()，并做好兼容性兜底，是添加点击震动反馈最可靠的方式。它不能自动触发，也不能跨平台一致生效，必须按规则来。
必须由用户手势触发
浏览器（Chrome、Safari iOS 16.4+、Android WebView）强制要求：首次调用 navigator.vibrate() 必须发生在 click、touchend 等用户主动交互事件的同步回调中。放在 DOMContentLoaded、setTimeout 或游戏循环里，会静默失败——不报错，也不震动。
- ✅ 正确写法：给按钮绑定
click事件，在处理函数内直接调用navigator.vibrate(150) - ⚠️ 注意：iOS Safari 首次合法触发后，后续调用才可能被允许；Android 则通常只认“第一次”手势激活
- ❌ 错误示例：
setTimeout(() => navigator.vibrate(200), 100)或页面加载完立刻执行
参数要简洁且符合平台限制
移动端振动不是“播放音效”，而是向系统发请求，实际表现取决于设备硬件和系统策略。iOS 和 Android 差异明显：
- iOS Safari：仅支持单个数字，且强烈建议 ≤ 200ms（官方未明说上限，但实测 ≥ 500ms 常被截断或忽略）；数组模式如
[200, 100, 200]直接返回false，不执行 - Android：支持单值（如
200）和数组模式（如[150, 50, 150]），但部分厂商系统（MIUI、EMUI）会屏蔽或限制总时长（常见上限 1000ms） - 统一建议：对点击反馈使用
100–200ms单次短震，避免长震或复杂序列，确保多数设备可感知又不突兀
调用前必须检测可用性并降级
navigator.vibrate 不是所有环境都存在，即使存在也不代表能成功执行。不能只靠 if (navigator.vibrate) 判断。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 先检查是否存在且为函数：
'vibrate' in navigator && typeof navigator.vibrate === 'function' - 调用后检查返回值：
const ok = navigator.vibrate(150); if (!ok) { /* 触发视觉反馈，比如按钮缩放或变色 */ } - iOS 或桌面端直接跳过震动逻辑，改用动画/颜色变化等视觉提示，不要 fallback 到声音（除非你已确认音频可用）
别把它当关键反馈路径
震动只是增强型体验，不是信息传达的主通道。现实情况是：
- iOS 全面限制，很多用户根本收不到震动
- 后台标签页、请勿打扰模式、系统触感关闭都会导致静默失效
- 真正依赖震动传递关键信息（如操作成功、错误警告），会导致大量用户漏感知
所以，点击震动应配合明确的视觉反馈（按钮按压态、状态图标变化）和可选音效，三者并行，缺一不可。
