navigator.vibrate在某些设备上无反应，是因为必须由用户手势（如click、touchend）同步触发，且页面需处于前台活跃状态；ios safari完全不支持，android需开启系统触感反馈，https环境（非localhost）也是chrome硬性要求。
navigator.vibrate 为什么在某些设备上完全没反应
不是代码写错了，而是 navigator.vibrate 有硬性前提：必须在用户手势触发的上下文中调用（比如 click、touchend），且页面需处于活跃标签页。后台标签页、自动定时器、DOMContentLoaded 里调用都会静默失败。Chrome 还要求页面启用 HTTPS（本地 localhost 是例外）。
常见错误现象：navigator.vibrate(200) 返回 true 但没震动——说明权限通过，但设备不支持或系统级关闭了触感反馈（如 iOS Safari 完全不支持，Android 需开启「触感反馈」系统设置）。
- 安卓 Chrome / Edge：需确认系统设置 → 声音与振动 → 触感反馈已开启
- iOS Safari：直接不支持
navigator.vibrate，调用返回false - 桌面浏览器（包括 Chrome DevTools 的移动端模拟）：一律不触发物理震动
按钮点击事件中正确调用 vibrate 的写法
必须绑定在用户真实交互事件上，不能包裹在异步回调（如 setTimeout、Promise.then）里。同时建议加个简单兼容兜底，避免报错中断逻辑。
button.addEventListener('click', () => {
// 检查 API 是否可用且支持
if ('vibrate' in navigator && navigator.vibrate) {
// 短震一次（毫秒数 ≤ 5000）
navigator.vibrate(30);
}
});
注意参数类型：navigator.vibrate() 接收两种格式：
- 单个数字（如
100）：震动时长（ms），最大支持 5000 - 数字数组（如
[20, 10, 30]）：交替执行「震-停-震」，总时长仍不能超 5000ms；奇数索引为震动时长，偶数索引为暂停时长
vibrate 在不同 Android 版本和厂商系统上的表现差异
Android 8.0+ 开始，部分厂商（如小米、华为）限制网页调用振动权限，即使代码合法也可能被系统拦截。实测发现：
- 原生 AOSP（Pixel）：响应最稳定，
navigator.vibrate(50)几乎必成功 - MIUI：需在「设置 → 应用设置 → 浏览器 → 权限管理 → 振动」手动开启，否则静默忽略
- EMUI（华为）：部分版本对非焦点页面或快速连续调用会降频甚至屏蔽
- 振动强度无法控制：API 不提供振幅/频率参数，完全依赖系统默认策略
所以别指望靠多次短震模拟“节奏感”，更稳妥的做法是只在关键操作（如提交成功、删除确认）后触发一次 40–60ms 的轻震，避免被系统判定为骚扰。
如何安全地检测并降级处理震动不可用的情况
不要只靠 'vibrate' in navigator 判断——它在 iOS 上也返回 true，但实际调用会返回 false。真正可靠的判断方式是执行一次并检查返回值：
function canVibrate() {
if (!('vibrate' in navigator)) return false;
// 尝试触发极短震动（1ms），避免干扰用户
return navigator.vibrate(1);
}
// 使用示例
button.addEventListener('click', () => {
if (canVibrate()) {
navigator.vibrate(40);
} else {
// 降级：播放提示音或添加 CSS 按压动画
playFeedbackSound();
button.classList.add('pressed');
}
});
重点提醒：iOS 用户永远收不到震动反馈，而他们占移动 Web 流量近一半。如果你的按钮反馈只依赖震动，等于对这部分用户完全失明——务必搭配视觉或听觉反馈，否则交互体验是断裂的。
