能，但需用户手势触发且页面激活；参数为数字或偶数长度数组，总时长≤5000ms；iOS≥16.4支持，需HTTPS及触感反馈开启。
浏览器能否直接调用 navigator.vibrate()？
能，但有严格限制：必须在用户手势触发的上下文中（比如 click、touchend）调用，且页面需处于激活状态（不是后台标签页）。Chrome、Firefox、Safari（iOS 16.4+）均支持，但 iOS Safari 早期版本完全禁用，至今不支持连续震动或自定义波形。
navigator.vibrate() 的参数怎么传才有效？
传数字或数字数组：navigator.vibrate(200) 表示震动 200ms；navigator.vibrate([100, 50, 100]) 表示震 100ms → 停 50ms → 震 100ms。注意：数组长度必须为偶数（震/停交替），总时长不能超过 5000ms，否则被截断；传 0 或空数组会清空待执行队列，但不会触发震动。
常见错误现象：
- 直接在
DOMContentLoaded里调用 → 无效，控制台无报错但无反应 - 传
[100, 200, 300]（奇数长度）→ 静默失败，只执行前两项（100ms震 + 200ms停） - 在 iframe 里调用且未声明
allow="vibrate"→ 被浏览器阻止
如何在 index.html 中安全触发震动？
绑定到显式用户操作，避免自动触发。示例代码片段：
立即学习“前端免费学习笔记（深入）”；
<button id="vib-btn">点我震动</button>
<script>
document.getElementById('vib-btn').addEventListener('click', () => {
// 检查 API 是否可用
if ('vibrate' in navigator) {
// iOS Safari 需要先请求权限（实际是静默检查）
// 直接调用即可，无需额外 permission API
navigator.vibrate([150, 50, 150]);
} else {
console.log('vibrate not supported');
}
});
</script>
关键点：
- 不要依赖
navigator.permissions.query({name: 'vibrate'})—— 该权限无标准定义，多数浏览器不实现 - 避免在
setTimeout或异步回调中调用，除非该回调由用户手势直接引发 - Android Chrome 对后台标签页调用会静默忽略；iOS Safari 在非前台时完全禁用
为什么点击没反应？排查顺序是什么？
按优先级逐项验证：
- 确认设备系统支持：Android 通常都行；iOS 必须 ≥16.4，且「设置 > 辅助功能 > 触感反馈」已开启
- 检查是否在 HTTPS 环境下运行 —— HTTP 页面中
navigator.vibrate()被禁用 - 打开浏览器开发者工具 → Application 标签页 → 查看「Clear storage」旁的「Permissions」，确认没有手动屏蔽振动
- 用真机测试，模拟器通常不模拟震动硬件
iOS 上最容易被忽略的是：即使代码完全正确，若用户从未在该网站有过任何交互（比如首次打开就点按钮），部分 Safari 版本仍会拒绝震动 —— 必须确保页面已获得焦点且存在最小交互历史。
