index.html如何调用手机震动功能？-html教程-PHP中文网

能，但需用户手势触发且页面激活；参数为数字或偶数长度数组，总时长≤5000ms；iOS≥16.4支持，需HTTPS及触感反馈开启。

index.html如何调用手机震动功能？

浏览器能否直接调用 `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 中安全触发震动？

绑定到显式用户操作，避免自动触发。示例代码片段：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

<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>

关键点：