HTML中怎么用按钮触发手机震动反馈？Vibrate接口-html教程-PHP中文网

手机网页按钮点击后不震动并非权限问题，而是需满足https协议、用户已交互等硬性条件；ios普通safari至今不支持该api。

html中怎么用按钮触发手机震动反馈？vibrate接口

手机网页按钮点击后不震动，是不是没开权限？

不是权限问题——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 场景：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

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 动画或声音完全替代物理反馈。