HTML5 Vibration API 仅在用户主动交互时触发震动，支持毫秒级时长控制但无法自定义波形，仅限部分Android浏览器，iOS Safari完全不支持；需检测兼容性、绑定手势事件、合理设计时长并提供关闭选项。
HTML5 的 Vibration API 可以在支持的移动设备上触发硬件震动，为网页端虚拟游戏手柄提供基础的触觉反馈。但它有明确限制：仅在**用户主动交互（如点击、触摸）触发的上下文中生效**，且无法自定义波形、频率或强度，只能控制震动时长（毫秒级）。
前提条件与兼容性
当前仅部分 Android 浏览器（Chrome、Edge、Firefox for Android）支持该 API；iOS Safari 完全不支持（包括 PWA），且桌面浏览器无实现。使用前需检测：
if ('vibrate' in navigator) {
// 支持 Vibration API
} else {
// 不支持，降级处理（如视觉/音效反馈）
}
在虚拟手柄交互中触发震动
震动必须由用户手势直接触发（例如 touchstart、click），不能在定时器、网络响应或自动逻辑中调用。常见用法：
- 按下虚拟按钮（如“跳跃”“射击”）时执行
navigator.vibrate(100)（震动 100ms） - 组合震动模式：如
navigator.vibrate([200, 100, 200])表示震 200ms → 停 100ms → 再震 200ms（总时长 ≤ 5000ms） - 取消正在进行的震动：调用
navigator.vibrate(0)或navigator.vibrate([])
注意事项与实用建议
实际集成中需注意以下关键点：
立即学习“前端免费学习笔记（深入）”；
- 每次震动请求都会中断前一次，无需手动取消，除非需要精确控制节奏
- 避免高频连续调用（如每帧都 vibrate），系统会节流或忽略
- 震动时长建议控制在 50–300ms 区间：太短不易感知，太长影响操作节奏
- 务必搭配视觉反馈（按钮缩放、颜色变化）和可选音效，弥补 API 的局限性和平台缺失
- 在游戏设置中提供「震动反馈」开关，并默认关闭——尊重用户偏好与设备电量
简单示例：带震动的虚拟 A 键
假设有一个 <button id="btn-a">A</button>：
const btnA = document.getElementById('btn-a');
if ('vibrate' in navigator) {
btnA.addEventListener('touchstart', () => {
navigator.vibrate(80); // 轻按反馈
}, { passive: false });
// 兼容鼠标点击（仅限部分安卓 Chrome 桌面模式等少数场景）
btnA.addEventListener('click', () => {
navigator.vibrate(80);
});
}
不复杂但容易忽略：震动不是增强体验的“锦上添花”，而是移动端交互闭环的重要一环——前提是它可靠、克制、可关闭。
