JavaScript 浏览器 Vibration API 实现震动反馈怎么做-js教程-PHP中文网

vibration api 通过 navigator.vibrate() 实现震动反馈，需检测兼容性（ios safari 不支持）、用户手势触发、传入毫秒数或数组控制节奏，并避免滥用以保障体验。

在支持的移动浏览器中，使用 vibration api 实现震动反馈很简单，核心是调用 navigator.vibrate() 方法。但要注意兼容性、权限逻辑和实际体验细节。

确认浏览器支持并检查权限

不是所有浏览器都支持该 API，桌面端基本不支持，iOS Safari 长期禁用（截至 iOS 17 仍不可用），Android Chrome、Firefox 等较新版本支持。需先检测是否存在：

⚠️ 注意：即使 API 存在，也需页面处于前台且用户已与页面有过交互（如点击），否则部分浏览器会静默忽略震动请求。

检查 navigator.vibrate 是否为函数：if ("vibrate" in navigator && typeof navigator.vibrate === "function") { ... }
无需显式申请权限，但必须由用户手势（如 click、touchend）触发首次调用，后续可由 JS 主动触发

基础震动用法：传入毫秒数或数组

navigator.vibrate() 接收一个参数：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

数字（如 200）：震动 200 毫秒后停止
数字数组（如 [200, 100, 300]）：震动 200ms → 停 100ms → 震 300ms → 停止；总时长为各元素之和（含间隔）
传 0、[] 或 false 会停止当前震动（如有）

示例：短按反馈常用 navigator.vibrate(50)，错误提示可用 navigator.vibrate([100, 50, 100]) 模拟“滴滴滴”节奏。

避免滥用与用户体验建议

震动是强感官反馈，容易引发不适或耗电，应克制使用：

仅用于关键状态反馈（如表单提交成功、扫码完成、物理按键模拟），避免在滚动、悬停等场景触发
控制单次时长 ≤ 200ms，连续震动总时长建议 ≤ 500ms
提供设置开关，让用户能关闭震动（尤其对敏感人群或无障碍需求）
降级处理：不支持时跳过，不要报错阻断逻辑

完整轻量封装示例

可封装一个安全调用函数，兼顾检测与容错：

function triggerVibration(pattern = 50) {
  if (!("vibrate" in navigator) || typeof navigator.vibrate !== "function") return;
  try {
    navigator.vibrate(pattern);
  } catch (e) {
    // 部分安卓 WebView 可能抛异常，静默忽略
  }
}

// 使用（需在用户点击回调中）
button.addEventListener("click", () => {
  triggerVibration(60); // 轻震确认
});