别让手机乱抖！JS Vibration API 移动端震动实战与体验优化

刷短视频时双击点赞的轻微触感，或者游戏里技能释放的瞬间冲击，这些细腻的触觉反馈让数字界面变得有温度。在移动 Web 开发中，想要复现这种“物理手感”，核心工具就是浏览器提供的 Vibration API。

很多开发者拿到文档直接抄一句 navigator.vibrate(100)，结果上线后发现用户端毫无反应，甚至被 iOS 用户投诉耗电。其实这个 API 看似简单，背后藏着不少平台差异和体验陷阱。今天咱们不念官方说明书，聊聊怎么把这个功能用得自然又兼容。

基础用法与参数门道

最简单的调用确实只有一行代码，但参数决定了它是“叮”一下还是“嗡嗡”长鸣。vibrate 方法接收毫秒数或数组。

// 单次震动 200 毫秒
navigator.vibrate(200);

// 震动模式：震 100ms - 停 50ms - 再震 100ms
navigator.vibrate([100, 50, 100]);

这里有个细节容易被忽略：数组参数中的偶数位代表“停止时间”。如果你想模拟摩斯密码那样的断续感，就得靠调整这个间隔来控制节奏。另外，如果用户连续点击按钮，每次触发都来一次长震动非常打扰，这时候最好配合防抖逻辑，或者使用 navigator.vibrate.cancel() 来打断当前未完成的震动序列，保证交互的干净利落。

兼容性：最现实的拦路虎

代码写得再溜，跑不起来也是白搭。Android 下的 Chrome 对支持度相对友好，基本都能响应。到了 iOS 这边，情况就微妙了。Safari 虽然底层支持，但出于隐私和体验考量，限制了自动触发的权限。

通常只有在用户产生明确的交互行为（如点击、触摸）后，震动才会生效。如果在页面加载完成自动调用，大概率是无声无息。因此，一定要做特性检测，避免在老版本 WebView 里报错。

if ('vibrate' in navigator) {
  // 安全调用
  navigator.vibrate(50);
} else {
  // 降级处理，比如给个轻微的 CSS 闪烁动画
  element.classList.add('shake');
}

这段判断代码必不可少，它能防止你的应用在旧设备控制台里报红字，同时通过视觉反馈作为备选方案，确保信息传达不失焦。

体验设计：克制比丰富更重要

震动是强干预手段。想象一下，你在图书馆，手机屏幕一收到消息就开始持续抖动，那种焦虑感瞬间拉满。好的触觉反馈应该像心跳，存在感强但不扰人。

建议遵循以下三条原则：

1. 短促为主：移动端震动尽量控制在 50ms 到 150ms 之间，超过 200ms 容易让用户觉得设备故障。
2. 关键操作才震：提交表单成功、删除确认、错误提示适合用震动；而普通的点击切换 Tab 没必要每次都震，会造成“脱敏”。
3. 尊重系统设置：部分设备会读取系统的静音模式，此时震动可能被屏蔽。不要试图通过加大震动强度来强行突破系统限制。

总结

技术只是实现手段，体验才是最终目的。navigator.vibrate 是个低成本提升产品质感的神器，但也最容易因为滥用变成噪音源。在决定添加震动之前，多问自己一句：这个动作真的需要身体感知吗？

当手指划过屏幕能感受到细微的脉冲回馈，且这一切发生得恰到好处、不打断心流时，你就真正掌握了移动端触觉设计的精髓。别让代码里的震动变成用户的负担，而是成为他们指尖上一种默契的信号。