必须用 navigator.vibrate()，CSS 动画仅视觉抖动，无物理反馈；需在 click/pointerdown/touchstart 中同步调用、HTTPS 环境、iOS 需系统≥16.4且触感开启；参数须为数字或偶数长度数组，总时长≤5000ms（iOS 更严）。
震动效果该用 CSS 还是 JS？
必须用 navigator.vibrate()，CSS 动画只是“视觉抖动”，不是设备物理震动。用户摸不到、听不见，反馈就缺了一半——尤其在表单校验失败或操作确认场景下，纯视觉抖动容易被忽略，而真实震动能穿透注意力盲区。
为什么点按钮没震动？排查这三步
绝大多数失效不是代码写错，而是上下文不满足：
-
navigator.vibrate()必须在click、pointerdown或touchstart事件处理器中**同步调用**（不能套在setTimeout、fetch.then或async/await里） - 页面必须运行在 **HTTPS 协议下**（HTTP 页面直接禁用该 API）
- iOS 设备需同时满足：系统 ≥ 16.4 +「设置 > 辅助功能 > 触感反馈」已开启 + 首次调用发生在用户手势后（后续调用才持续有效）
参数怎么写才真正生效？
类型和结构稍有偏差就会静默失败（返回 true 但无震动）：
- ✅ 正确：
navigator.vibrate(150)（单次 150ms）、navigator.vibrate([200, 80, 150])（偶数长度数组，震-停-震） - ❌ 无效：
navigator.vibrate("150")（字符串）、navigator.vibrate([100, 200, 300])（奇数长度）、navigator.vibrate([0, 100])（部分 Android 会截断或丢弃） - ⚠️ 总时长不能超过 5000ms；iOS 实际限制更严，单次 ≤ 15ms，多段总长 ≤ 500ms
移动端点击没反应？优先换 pointerdown
click 在某些安卓机型或快速连续点击时可能被防抖/跳转中断，而 pointerdown 触发更早、兼容鼠标和触摸、且不会被页面导航打断：
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('pointerdown', () => {
if ('vibrate' in navigator) {
navigator.vibrate([100, 30, 80]); // 短促三段式，明确提示
}
});
别忘了加 touch-action: manipulation 防止 300ms 延迟，否则震动和视觉反馈会明显脱节。
