震动反馈仅在支持触觉反馈的移动设备上有效，需HTTPS协议和用户手势触发，桌面浏览器及Safari均不支持，调用会静默失败。
震动反馈在桌面浏览器根本不会工作
HTML 的 navigator.vibrate() API 仅在**支持触觉反馈的移动设备上可用**，且必须满足两个硬性条件：页面已获得用户手势激活（比如点击、触摸）、协议为 HTTPS（本地 localhost 除外）。Chrome、Edge、Firefox for Android 支持该 API，但 Safari 完全不支持（包括 iOS 和 macOS），且所有桌面版浏览器（哪怕启用了实验性功能）均无视 vibrate() 调用——它会静默失败，不报错也不震动。
常见错误现象：navigator.vibrate(200) 在 PC 浏览器控制台执行后无反应，typeof navigator.vibrate 返回 "function" 给人“可用”错觉，实则调用无效。
- 务必先检测支持性：
if ("vibrate" in navigator)仅表示 API 存在，不等于可用 - 真实可用需同时满足：
navigator.vibrate(1)返回true（注意：传 0 或空数组会返回true但不触发震动，不能靠它判断） - 首次调用必须由用户手势（
click、touchstart）触发；后续自动调用（如定时器）在部分安卓浏览器中可能被拦截
正确触发震动的最小可运行代码
以下代码在安卓 Chrome 中可立即生效，iOS Safari 会跳过震动逻辑（需提前告知用户）：
<button id="vibe">点我震动</button>
<script>
document.getElementById("vibe").addEventListener("click", () => {
// 检查是否真正支持并可触发
if ("vibrate" in navigator && navigator.vibrate) {
// 短震 150ms（避免过长被系统限制）
const success = navigator.vibrate(150);
if (!success) {
console.warn("震动未触发：可能被系统拒绝或设备不支持");
}
} else {
console.log("vibrate API 不可用");
}
});
</script>
关键细节：
立即学习“前端免费学习笔记（深入）”；
- 震动时长建议 ≤ 500ms；超过可能被 Android 系统截断（尤其在后台或低电量模式）
- 传入数组可实现模式震动（如
[200, 100, 300]表示震 200ms → 停 100ms → 震 300ms），但部分旧机型只支持首项 - 调用
navigator.vibrate(0)或navigator.vibrate([])会终止当前正在执行的震动序列
替代方案：当震动不可用时别留白
不能依赖震动作为唯一反馈。用户点击后若无响应，会怀疑操作失败。必须提供降级方案：
- 视觉反馈：按钮添加
active类 +transform: scale(0.95)或背景色闪动 - 声音反馈：使用
AudioContext播放短促提示音（注意需用户手势解锁音频上下文） - 文字提示：状态栏显示“已确认”或图标切换（如勾选动画）
- 避免 fallback 逻辑耦合震动检测：把“反馈行为”封装成函数，震动只是其中一种可选分支
例如：triggerFeedback({ vibrate: true, visual: true, sound: false }) 内部按环境选择执行路径。
真机调试时容易忽略的系统级限制
即使代码完全正确，仍可能无声无息失败：
- Android 设置中关闭了“触感反馈”或“振动强度设为零” →
vibrate()静默返回true，但无物理反馈 - 设备处于勿扰模式或静音时，部分厂商（如 Samsung）会禁用触觉反馈
- 连续高频调用（如每 100ms 一次）会被系统节流，实际震动间隔拉长甚至丢弃
- WebView 场景（如 Cordova、Capacitor）需额外检查插件权限（如
android.permission.VIBRATE）和 manifest 配置
真机测试前，务必手动打开系统设置里的振动开关，并用原生短信/键盘确认震动功能正常——这是比代码更常出问题的一环。
