navigator.vibrate 震动反馈需用户手势直接触发且不可异步延迟，支持毫秒数或数组模式，需检测兼容性并降级处理，ios safari 不支持。
网页按钮点击后通过 navigator.vibrate 实现震动反馈，本质是调用设备的振动硬件 API，但需满足特定条件才能生效。
前提条件：必须在用户手势触发的上下文中调用
浏览器出于隐私和体验考虑，强制要求振动 API 只能在用户真实交互（如 click、touchstart、keydown）的事件处理函数中直接调用。不能延迟到 setTimeout、Promise.then 或异步回调中执行，否则会被静默忽略。
- ✅ 正确：在
button.addEventListener('click', () => navigator.vibrate(50))中直接调用 - ❌ 错误：在
setTimeout(() => navigator.vibrate(50), 100)中调用（即使该定时器由点击触发） - ⚠️ 注意：页面首次加载后，必须有至少一次用户主动交互（如点一下空白处或按钮），之后振动 API 才会“解锁”——部分安卓 Chrome 在未激活媒体/传感器权限前会拒绝振动
基础用法：传入毫秒数或震动模式数组
navigator.vibrate() 接收一个参数：
– 若为正整数（如 100），表示持续震动 100 毫秒；
– 若为数组（如 [20, 40, 30]），表示按「震动 20ms → 停顿 40ms → 震动 30ms」的模式执行（停顿时间不可为负，总时长建议 ≤ 5000ms）。
- 短反馈推荐：
navigator.vibrate(30)（轻快确认感） - 错误提示可用：
navigator.vibrate([50, 30, 50])（类似“滴滴滴”节奏） - 注意：连续多次调用不会自动排队，后一次会中断前一次；如需连贯效果，请用单次数组参数描述完整序列
兼容性与降级处理
并非所有设备/浏览器都支持振动。iOS Safari 完全不支持 navigator.vibrate（即使在 PWA 中），部分旧版 Android 浏览器也返回 undefined。
- 调用前务必检测：
if ('vibrate' in navigator && typeof navigator.vibrate === 'function') - 不支持时，可降级为视觉反馈（如按钮缩放动画 + 微弱音效）或忽略
- 移动端 WebView（如微信内置浏览器）行为不一，建议实测；部分环境需额外开启「允许网站使用振动」系统级权限（Android 12+）
实际按钮集成示例
给按钮添加简洁可靠的震动反馈：
<button id="actionBtn">提交</button>
<script>
const btn = document.getElementById('actionBtn');
btn.addEventListener('click', function() {
// 触发主逻辑（如表单提交、状态切换）
doSomething();
// 紧接着、同步触发震动
if ('vibrate' in navigator && typeof navigator.vibrate === 'function') {
navigator.vibrate(40); // 轻震 40ms，兼顾感知与克制
}
});
</script>
注意：避免在表单 submit 事件中直接震动（可能因页面跳转中断），优先绑定到按钮 click；若需防重复点击，应在震动调用前加节流或禁用按钮。
