按钮点击必须同步调用 navigator.vibrate()才生效，异步调用（如 settimeout、fetch.then）均静默失败；ios 仅支持 ≤15ms 单数字且需 https 和触感开启；android 支持数组但受定制系统限制；必须检测返回值并提供视觉降级。
按钮点击必须同步调用 navigator.vibrate()
不生效的最常见原因，是把震动逻辑塞进了异步流程里。浏览器（Chrome、Safari iOS 16.4+）强制要求：首次调用 navigator.vibrate() 必须发生在 click、touchend 或 pointerdown 等用户手势事件的**同步回调中**。
以下写法一律静默失败（不报错，也不震）：
setTimeout(() => navigator.vibrate(150), 0)fetch('/api').then(() => navigator.vibrate(150))document.addEventListener('DOMContentLoaded', () => navigator.vibrate(150))
✅ 正确做法只有一种：绑定事件后，在处理函数第一行直接调用。
document.getElementById('vibe-btn').addEventListener('click', () => {
if ('vibrate' in navigator && navigator.vibrate) {
navigator.vibrate(150);
}
});
iOS 和 Android 的参数差异必须分开处理
iOS Safari 对 navigator.vibrate() 的限制极严，不是“兼容性差”，而是“几乎不认”。它只在满足三个条件时才可能震一次：HTTPS 页面 + 用户已开启「设置 > 辅助功能 > 触感反馈」+ 参数为 ≤15ms 的单个数字（实测 ≥16ms 就大概率被系统截断或忽略）。
Android 虽支持数组模式（如 [200, 100, 200]），但 MIUI、EMUI 等定制系统常截断总时长（上限常为 1000ms）或丢弃奇数长度数组。
统一建议：
- 对点击反馈，统一用
navigator.vibrate(15)—— iOS 可能响，Android 肯定响，且不会被系统拒 - 避免传
[100, 50, 100]或200给 iOS，它只会返回false或静默失败 - 传
0或[]可终止当前震动，但部分旧机型无反应
必须检测返回值并提供视觉降级
navigator.vibrate() 返回布尔值：true 表示系统接受了请求（不一定真震），false 表示被拒绝或不可用。不能只靠 'vibrate' in navigator 判断。
真正可靠的做法是：
- 调用后检查返回值：
const ok = navigator.vibrate(15); if (!ok) { /* 触发视觉反馈 */ } - 视觉反馈必须存在：比如给按钮加
active类，配合transform: scale(0.98)和背景色瞬变 - 别 fallback 到声音——扬声器模拟震动既失真，又可能在静音模式下突兀出声
- 遇到
matchMedia('(prefers-reduced-motion: reduce)')匹配时，连视觉反馈也应关闭
后台标签页、低电量、请勿打扰都会让震动失效
震动不是稳定通道。iOS 在后台标签页完全禁用；Android Chrome 从 v96 起要求页面处于前台活跃状态；华为 EMUI、小米 MIUI 等系统会直接屏蔽 API（即使 navigator.vibrate 存在且返回 true）；用户开了“减少动态效果”或系统触感关闭，也会静默失效。
这意味着：任何关键操作（如表单提交成功/失败、支付确认）都不能依赖震动传递信息。它只能是视觉反馈的增强层，且必须三者并行：视觉变化 + 可选音效（需单独判断音频上下文） + 震动（尽力而为）。
最容易被忽略的是：iOS 首次合法触发后，后续调用才可能被允许；而 Android 多数机型只认“第一次”手势激活——这导致开发时在桌面 Chrome 模拟器里测通了，真机上点十次才震一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
