手机网页按钮点击后不震动并非权限问题，而是需满足HTTPS协议、用户已交互等硬性条件；iOS普通Safari至今不支持该API。
手机网页按钮点击后不震动，是不是没开权限？
不是权限问题——navigator.vibrate() 在大多数现代移动浏览器里默认可用，但必须满足两个硬性条件：页面是 HTTPS 协议、用户已与页面有过交互（比如点过按钮）。纯自动触发（如页面加载完立刻 vibrate()）会被浏览器静默忽略。
- HTTPS 是强制要求，HTTP 页面调用
navigator.vibrate()直接返回false且无报错 - 首次调用必须由用户手势（
click、touchstart）触发，后续才能在 JS 逻辑中自由调用 - iOS Safari 直到 iOS 16.4 才支持该 API，且仅限于「主屏幕快捷方式」或「PWA 安装后」场景；普通 Safari 标签页仍不支持
vibrate() 参数怎么传才有效？
navigator.vibrate() 接收一个数字或数字数组。传单个数字（如 200）表示震动 200ms；传数组（如 [200, 100, 300]）表示「震 200ms → 停 100ms → 震 300ms」。但要注意：总时长超过 5000ms 会被截断，iOS 对单次震动上限更严（通常 ≤ 500ms）。
- 空数组
[]或0会停止当前震动（但实际很少需要主动停） - 传
1这种极短值，在部分安卓机型上可能无感，建议 ≥ 30ms 起步 - 连续多次快速调用（如每 50ms 调一次）不会叠加效果，浏览器会排队或丢弃
按钮绑定震动的最小可靠写法
别绕弯子，直接监听 click，检查 API 是否存在再调用。下面这段代码能覆盖绝大多数安卓+Chrome/iOS PWA 场景：
const btn = document.getElementById('vibe-btn');
if ('vibrate' in navigator) {
btn.addEventListener('click', () => {
// 短促双震，比单震更容易被感知
navigator.vibrate([50, 20, 50]);
});
} else {
console.log('vibrate not supported');
}
- 不用等
DOMContentLoaded，只要元素存在就能绑；但确保btn已挂载 - 避免在
touchstart里调用——某些安卓 WebView 会因事件冒泡冲突导致失败，click更稳 - 别用
async/await包裹，vibrate()是同步返回布尔值，不返回 Promise
为什么真机测试没反应？先查这三件事
震动失效八成不是代码问题，而是环境卡点：
立即学习“前端免费学习笔记（深入）”；
- 打开系统设置 → 查看「触感反馈」「振动反馈」是否开启（尤其华为、小米默认关）
- 确认当前标签页处于前台，切到后台再切回来，首次震动需重新触发交互
- 用
console.log(navigator.vibrate(100))测试返回值：返回true表示调用成功（但不保证物理震动），false表示被拒绝或不支持
真正难搞的是 iOS 普通 Safari 的兼容性——它至今没开放这个接口，连 'vibrate' in navigator 都为 false。如果目标用户含大量 iPhone 普通浏览器用户，得准备降级提示，别指望靠 CSS 动画或声音完全替代物理反馈。
