振动权限需用户手势触发且页面为HTTPS，iOS限500ms单值、Android支持数组模式，调用前须检测API可用性并降级处理视觉反馈。
振动权限在移动端必须显式请求
Chrome 和 Safari 在 iOS 16.4+ / Android 上默认禁用自动振动，navigator.vibrate() 调用前必须处于用户手势触发的上下文中（如 click、touchend），且页面需为 HTTPS 协议。直接在 DOMContentLoaded 或定时器里调用会静默失败。
- 错误现象：
navigator.vibrate(200)返回false，控制台无报错但设备无反应 - 正确做法：绑定到按钮点击事件，例如
button.addEventListener('click', () => navigator.vibrate(200)) - iOS 特别限制：Safari 仅允许振动 ≤ 500ms，且必须是用户主动触发；后台标签页或 iframe 中调用无效
navigator.vibrate() 的参数格式与兼容性差异
该 API 接收两种参数：单个数字（毫秒）或数字数组（交替启停时长）。但不同平台对数组支持程度不一，尤其 iOS 仅支持单值且忽略数组。
- 基础用法：
navigator.vibrate(300)—— 振动 300ms（iOS/Android 均支持） - 模式振动：
navigator.vibrate([200, 100, 300])—— 振 200ms → 停 100ms → 振 300ms；Android 支持，iOS 忽略并静默返回false - 清空队列：
navigator.vibrate(0)或navigator.vibrate([])可终止当前振动（部分旧版 Android 不支持空数组）
检测 API 是否可用及降级处理
不能假设 navigator.vibrate 存在或可用，尤其在桌面浏览器或禁用振动的设备上。需运行时检测并提供替代反馈。
- 检查方式：
typeof navigator.vibrate === 'function'，但返回true不代表能成功执行（如权限未获） - 安全调用模式：
if (navigator.vibrate) { const success = navigator.vibrate(150); if (!success) { // 触发视觉反馈，如按钮缩放或颜色变化 } } - 注意：某些 Android 定制系统（如华为 EMUI）会屏蔽振动，即使
navigator.vibrate存在且返回true，实际也无响应
振动时长超过系统限制会被截断
Android 通常允许最长 5 秒单次振动（navigator.vibrate(5000)），但部分厂商系统（如小米 MIUI）强制限制为 1 秒；iOS 则硬性限制为 500ms。传入超长值不会报错，但会被系统静默截断。
立即学习“前端免费学习笔记（深入）”；
- 常见陷阱：用
navigator.vibrate(3000)模拟“长提醒”，结果在 iPhone 上只震半秒 - 建议策略：对关键操作（如表单提交失败）用短脉冲（100–200ms）；避免依赖长振动传递信息
- 调试技巧：在 Chrome DevTools 的 Sensors 面板中启用 “Vibration” 模拟，可验证逻辑是否触发
