HTML中如何用Vibration API让设备震动

想让网页在移动端触发设备震动？别再踩坑了！Vibration API 虽简单，却处处是限制：必须通过用户手势（如点击）触发、页面需 HTTPS、iOS 仅支持 ≤500ms 单次振动且完全不认数组模式，而 Android 虽更灵活却受厂商系统（如 MIUI、EMUI）层层拦截；调用前不仅要检测 API 是否存在，还得验证执行结果，失败时务必降级为视觉反馈；调试时善用 Chrome Sensors 面板模拟，开发时牢记——在 iPhone 上，哪怕代码完美无缺，只要不是“手指落下的那一瞬”或超过半秒，震动就注定静默失效。

振动权限在移动端必须显式请求

Chrome 和 Safari 在 iOS 16.4+ / Android 上默认禁用自动振动，navigator.vibrate() 调用前必须处于用户手势触发的上下文中（如 click、touchend），且页面需为 HTTPS 协议。直接在 DOMContentLoaded 或定时器里调用会静默失败。

• 错误现象：navigator.vibrate(200) 返回 false，控制台无报错但设备无反应
• 正确做法：绑定到按钮点击事件，例如 button.addEventListener('click', () => navigator.vibrate(200))
• iOS 特别限制：Safari 仅允许振动 ≤ 500ms，且必须是用户主动触发；后台标签页或 iframe 中调用无效

navigator.vibrate() 的参数格式与兼容性差异

该 API 接收两种参数：单个数字（毫秒）或数字数组（交替启停时长）。但不同平台对数组支持程度不一，尤其 iOS 仅支持单值且忽略数组。

• 基础用法：navigator.vibrate(300) —— 振动 300ms（iOS/Android 均支持）
• 模式振动：navigator.vibrate([200, 100, 300]) —— 振 200ms → 停 100ms → 振 300ms；Android 支持，iOS 忽略并静默返回 false
• 清空队列：navigator.vibrate(0) 或 navigator.vibrate([]) 可终止当前振动（部分旧版 Android 不支持空数组）

检测 API 是否可用及降级处理

不能假设 navigator.vibrate 存在或可用，尤其在桌面浏览器或禁用振动的设备上。需运行时检测并提供替代反馈。

• 检查方式：typeof navigator.vibrate === 'function'，但返回 true 不代表能成功执行（如权限未获）
• 安全调用模式：

  if (navigator.vibrate) {
    const success = navigator.vibrate(150);
    if (!success) {
      // 触发视觉反馈，如按钮缩放或颜色变化
    }
  }

• 注意：某些 Android 定制系统（如华为 EMUI）会屏蔽振动，即使 navigator.vibrate 存在且返回 true，实际也无响应

振动时长超过系统限制会被截断

Android 通常允许最长 5 秒单次振动（navigator.vibrate(5000)），但部分厂商系统（如小米 MIUI）强制限制为 1 秒；iOS 则硬性限制为 500ms。传入超长值不会报错，但会被系统静默截断。

• 常见陷阱：用 navigator.vibrate(3000) 模拟“长提醒”，结果在 iPhone 上只震半秒
• 建议策略：对关键操作（如表单提交失败）用短脉冲（100–200ms）；避免依赖长振动传递信息
• 调试技巧：在 Chrome DevTools 的 Sensors 面板中启用 “Vibration” 模拟，可验证逻辑是否触发

实际项目里最容易被忽略的是 iOS 对上下文和时长的双重限制——哪怕代码完全正确，只要不是用户手指点下去那一瞬间调用，或者超过了 500ms，就注定没反应。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中如何用Vibration API让设备震动》文章吧，也可关注golang学习网公众号了解相关技术文章。