html 震动API移动端

2026-04-23 03:00:12 1797阅读 0评论

移动端HTML震动API：让触控更有反馈的实战指南

移动端的触控反馈，很多时候被我们当作“有回应”的默认体验。在需要强调交互重点或区分操作层级的场景，平滑的触感反馈能提升可用性与安心感。浏览器原生的震动API就是一种低门槛的触觉反馈手段，它不依赖额外硬件，通过手机系统本身产生可感知的震动，适用于表单确认、按钮点击、导航提示等。

为什么用浏览器震动API

在APP内交互中，很多反馈难以精准控制（如系统摇晃动画），而网页端在轻量交互上也能直接用系统震动，统一体验且省去集成第三方SDK的麻烦。关键在于时机、时长和强度的把握，让人在点击、长按或滑动时，立即获得与操作相匹配的触觉提示。

适用场景与限制

适用：表单提交确认、密码输入提示、导航切换提示、按钮反馈、页面加载完成触达
限制：持续时间不宜过长（通常不超过300ms），过于频繁会触发系统限制；非静止场景（如行车、运动）应谨慎使用；安卓与iOS在权限与调用方式上存在差异，需分别适配。

基础调用与参数

调用前需先获取用户授权，再通过navigator.vibrate()或navigator.webkitVibrate()（旧API）触发。

<button onclick="triggerVibration()">点击触发震动</button>

<script>
function triggerVibration() {
  // 传统API调用（现代设备已逐步弃用）
  // navigator.webkitVibrate([pattern]);

  // 推荐使用标准API
  navigator.vibrate([100, 50, 100]); // 100ms震动，50ms停止，100ms再次震动
}
</script>

pattern：一个数字数组，表示以毫秒为单位的震动与停顿交替序列。
停止：调用后不传参数或传入[]可立即停止。

高级用法：节奏、强度与环境适配

节奏与强度

更细腻的控制可以通过多个pattern组合或在回调中重复触发：

function createPattern(duration, interval) {
  return [...Array(duration / interval).keys()].map(i => i * interval + 10);
}

function repeatPattern() {
  setTimeout(() => {
    navigator.vibrate(createPattern(200, 50));
    repeatPattern();
  }, 500);
}
repeatPattern();

注意：连续调用可能累积系统抖动，需在关键交互后立即停止。

环境适配

在运动或静止设备上，相同pattern的体验差异很大，应在交互前判断设备状态并调整强度与时机。

// 简单设备状态判断示例（具体可用传感器或用户反馈）
function isDeviceInMotion() {
  // 这里根据业务场景与可用接口判断
  return false; // 默认静止
}

if (!isDeviceInMotion()) {
  navigator.vibrate([100, 100, 100]); // 强弱适中的反馈
} else {
  navigator.vibrate([50, 50]); // 运动场景弱化反馈
}