JavaScript震动API使用教程，手机实现震动效果方法

你在学习文章相关的知识吗？本文《JavaScript震动API怎么用\_手机如何实现震动效果》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

JavaScript振动API是浏览器原生接口，用于控制移动设备振动，需用户手势触发，支持数字或数组参数，兼容性需检测且受iOS/Android系统限制。

JavaScript 振动 API（Vibration API）是浏览器提供的一套用于控制移动设备振动马达的接口，主要在支持该功能的 Android 和部分 iOS 设备上可用。它不依赖第三方库，原生支持，但需用户主动触发（如点击事件中调用），且不能后台持续振动。

振动 API 的基本用法

核心方法是 navigator.vibrate()，它接受一个参数，可以是：

• 一个数字（毫秒数），例如 navigator.vibrate(200)：振动 200 毫秒；
• 一个数字数组，例如 navigator.vibrate([100, 50, 200])：振动 100ms → 停顿 50ms → 振动 200ms；
• 传入 0、空数组 [] 或 false 会停止当前振动（部分浏览器支持）。

使用前必须检查兼容性与权限

并非所有浏览器或设备都支持振动，调用前应判断：

• 检查 API 是否存在：if ("vibrate" in navigator)；
• iOS Safari 从 iOS 16.4 起才有限支持（仅限用户手势触发，且振动时长被系统限制，通常最大 500ms）；
• Android Chrome / Firefox 支持较好，但需页面处于活跃标签页且有用户交互上下文（如 click、touchend）。

安全限制与常见问题

浏览器出于用户体验和功耗考虑，施加了严格限制：

• 只能在用户手势（如按钮点击）回调中首次调用，不能在页面加载或定时器中自动触发；
• 连续多次调用可能被节流或忽略，尤其在 iOS 上；
• 振动时长超过系统允许上限（如 iOS 限制单次 ≤500ms）会被截断；
• PWA 安装后，在部分 Android 设备上可获得更稳定的振动支持。

简单实用示例

给一个按钮添加点击震动反馈：

<button id="vibeBtn">点我震动</button>
<script>
  const btn = document.getElementById("vibeBtn");
  btn.addEventListener("click", () => {
    if ("vibrate" in navigator) {
      navigator.vibrate(150); // 轻震 150ms，适合反馈
    }
  });
</script>

理论要掌握，实操不能落！以上关于《JavaScript震动API使用教程，手机实现震动效果方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！