HTML5小游戏在移动端调用震动API需用navigator.vibrate()，须用户手势触发、仅Android支持、iOS完全不支持，且需检查'vibrate' in navigator && typeof navigator.vibrate === 'function'。
震动 API 在 HTML5 小游戏中怎么调用
HTML5 游戏想在移动端加震动反馈，核心就是 navigator.vibrate()。它不是“播放震动”，而是向系统发起一个震动请求，实际是否执行、持续多久、强度如何，完全由设备操作系统和硬件决定。
最简调用方式：
if (navigator.vibrate) {
navigator.vibrate(150); // 持续震动 150ms
}
注意：navigator.vibrate 是一个函数，不是布尔值；但某些旧版 Android WebView（如 Android 4.4）会把它暴露为 undefined 或直接不支持，不能只靠 if (navigator.vibrate) 安全判断。
- 推荐先检查
'vibrate' in navigator，再确认类型是函数：typeof navigator.vibrate === 'function' - 震动时长超过 5000ms（5秒）会被浏览器截断，多数安卓设备还限制单次最长 1000ms
- iOS Safari 完全不支持该 API —— 这不是 bug，是 Apple 的明确策略，连
navigator.vibrate都不会定义
震动模式数组写法与常见失效原因
传入数组可实现多段震动（比如“滴滴”提示），例如：navigator.vibrate([200, 100, 200]) 表示震 200ms → 停 100ms → 震 200ms。但这个功能极易失效，尤其在非用户手势触发的上下文中。
关键限制：从 Chrome 57 / Android WebView 60 起，震动 API 必须由**用户主动触发的事件**（如 click、touchend）同步调用，否则静默失败（无报错，也不震动）。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：在
setTimeout、requestAnimationFrame、或游戏主循环中调用 - ✅ 正确：绑定在按钮
onclick或canvas的ontouchend里，且必须是同一事件处理函数内直接调用 - ⚠️ 注意：iOS 不支持，所以不要在
else分支里 fallback 到其他提示（比如声音），除非你已确认当前环境支持震动
兼容性兜底策略与真实可用场景
别指望“跨平台统一震动体验”。现实是：仅部分 Android 设备 + Chrome/Firefox 移动版能稳定工作；iOS 全面缺席；桌面端基本无效（即使有触控屏，也极少实现振动马达）。
因此，震动只能作为**增强型反馈**，而非关键交互路径。比如子弹击中敌人时补一震，但不能依赖它来传达“射击成功”这个信息——得同时配视觉动画 + 音效。
- 优先级排序：视觉 > 音效 > 震动（仅 Android 移动端）
- 检测到 iOS 或桌面环境时，直接跳过震动逻辑，避免冗余判断
- 若需更精细控制（如不同强度），目前没有标准 API；有些安卓厂商提供私有扩展（如 Samsung 的
navigator.webkitVibrate），但不可靠、不建议使用
调试时看不到震动？先查这三件事
开发中常遇到“写了代码却没反应”，大概率不是代码错，而是环境或权限问题。
- 确认页面运行在 HTTPS 或
localhost下（Chrome 对非安全上下文禁用敏感 API） - 检查是否在用户手势后立即调用：把
navigator.vibrate()放进button.addEventListener('click', ...)最外层，不要包在异步回调里 - Android 设备是否关闭了“触感反馈”系统设置（设置 → 声音与振动 → 触感反馈）—— 很多用户关了它，API 就完全静默
真正难处理的，是那些既没报错、又没震动、还通过了所有检测的“幽灵失效”——它们往往卡在系统级策略上，比如 MIUI 的省电模式拦截、华为 EMUI 的后台限制。这时候，放弃比硬刚更务实。
