HTML中Vibration API定义震动与间歇交替模式的参数配置-html教程-PHP中文网

vibrate数组参数的交替逻辑是：偶数索引（0、2、4…）为震动时长，奇数索引（1、3、5…）为间歇时长；长度为奇数时末尾仅震动不补间歇，负数或nan被静默忽略，超时长被截断。

html中vibration api定义震动与间歇交替模式的参数配置

震动模式参数必须是正整数数组，不能含零或负数

浏览器只接受 Array 类型的震动时长列表，每个元素代表毫秒级震动持续时间（非零正整数）。若传入 [0]、[-100] 或 [100, 0, 200]，整个调用会被静默忽略——既不报错，也不震动。

间歇由相邻两个值隐式定义：第一个值是震动时长，第二个是紧接着的静默时长，依此类推。因此数组长度为偶数时，最后一步是静默；为奇数时，最后一步是震动后立即终止（无尾部静默）。

navigator.vibrate([500, 300, 200]) 表示：震 500ms → 停 300ms → 震 200ms（之后停止）
navigator.vibrate([100, 400, 300, 200]) 表示：震 100ms → 停 400ms → 震 300ms → 停 200ms
单值如 navigator.vibrate(1000) 是简写，等价于 navigator.vibrate([1000])

重复震动需手动循环，API 不支持 repeat 参数

Vibration API 没有内置循环机制。想实现“震 100ms → 停 200ms → 重复 3 次”，不能靠某个配置项，必须自己控制调用节奏和计数。

注意：navigator.vibrate() 是异步且不可中断的——一旦开始执行数组模式，中途调用 navigator.vibrate([]) 或再次调用新数组，**不会打断当前震动序列**，而是排队或被丢弃（取决于浏览器实现）。

用 setTimeout 手动调度多次调用，例如：let i = 0; const loop = () => { if (i
避免高频触发：连续快速调用 navigator.vibrate() 可能被浏览器节流，尤其在后台标签页中直接失效
移动端 WebView（如 iOS WKWebView）默认禁用该 API，需显式开启权限或使用原生桥接

权限与兼容性限制比想象中更严格

Chrome、Edge 从 95+ 起要求页面处于用户手势上下文（如 click、touchstart 事件处理函数内）才能首次启用震动；Firefox 仅支持桌面模式下静音设备的模拟反馈；Safari 完全不支持 navigator.vibrate —— 这不是 bug，是明确拒绝实现。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

检测是否可用不能只靠 "vibrate" in navigator，还要结合实际调用返回值：navigator.vibrate([10]) 返回 true 表示已激活并接受指令，返回 false 表示被策略拦截（如无焦点、无用户交互、权限拒绝）。

务必在事件回调中首次调用，例如：button.addEventListener("click", () => navigator.vibrate([50]));
不要依赖 document.hasFocus() 判断，它无法反映震动权限状态
Android Chrome 中若系统设置关闭了“触感反馈”，navigator.vibrate 仍返回 true 但无物理响应

调试时看不到错误，但 console 里有隐式警告

当参数非法或权限不足时，navigator.vibrate() 不抛异常，但现代 Chrome 会在 DevTools Console 输出类似 Failed to execute 'vibrate' on 'Navigator': Invalid parameters 或 Vibration API disabled by user preference 的警告——前提是开发者工具开着且未过滤日志。

真机测试前，建议加一层最小验证逻辑：

function tryVibrate(pattern) {
  if (!("vibrate" in navigator)) return false;
  const ok = navigator.vibrate(pattern);
  console.log("vibrate attempted:", pattern, "→ result:", ok);
  return ok;
}

这个函数返回 false 并不总意味着失败——比如在 Safari 中它永远返回 false，但你没法靠它区分是 API 不可用还是被策略阻止。真正可靠的判断只能靠用户反馈或埋点统计实际震动发生率。

最常被忽略的是：震动模式在 PWA 添加到主屏幕后可能因 manifest 配置缺失而降级，且部分 Android OEM 厂商（如小米、华为）会全局屏蔽第三方应用的触感，连系统级白名单都无效。