让我们分解如何使用 JavaScript 让手机振动。基于浏览器的游戏是一个很好的（最好的？）用例。例如，在战舰游戏中，当船沉没时，手机会振动，让它变得更好。另一个很好的用途是在用户按下按钮或选中复选框时提供一些触觉反馈。这实际上非常简单，并且使用了称为navigator interface的东西。

navigator.vibrate()

在我们的代码中我们想要让手机振动的地方，只需使用navigator.vibrate(200);200 代表振动应该持续的毫秒数，当然可以更改。对于一个模式中的多个脉冲，传入一个值数组。该数组定义了手机振动、暂停、振动等的交替时间：

navigator.vibrate([400, 300, 400])

在这里，手机会振动 400 毫秒，停止 300 毫秒，然后再次振动 400 毫秒。根据 Mozilla 开发人员网络 (MDN) 文档，可以“根据需要”有尽可能多的振动/暂停对。但不要太疯狂，这里少即是多。没有人希望他们的手机每次在游戏中发生任何事情时都会不断振动。对于按钮按下的触觉反馈，50ms 之类的非常短的时间可能是正确的。

苹果 ...

关于振动 API 的不幸现实是，这仅适用于 Android 手机，因为 Apple 不支持它。这是关于该主题的Stack Overflow 评论：

从开发人员的角度来看（试图建立一个很棒的网站），振动 api 没有暴露在 iOS 上使用似乎很荒谬；毕竟，它已经在其他浏览器中可用将近 8 年了。但是，从 Apple 的角度来看……想想所有那些会通过垃圾邮件振动破坏您的浏览体验的糟糕网站。他们足够聪明，可以看到它会变成另一个弹出式灾难。这就是为什么我们不能拥有美好的事物。-isaacdre >

事实上，当用户在 Apple iPhone 上时调用 navigator.vibrate()会导致整个程序冻结。但这不是一个无法克服的问题。

解决方案

可以通过首先检查设备是否支持 navigator.vibrate() 接口来防止 Apple 设备崩溃。在我们实际希望振动发生的位置上方，我们可以这样写：

let canVibrate = false;
if('vibrate' in navigator)
  canVibrate = true;

我们正在创建一个设置为 false 的 canVibrate 变量。仅当设备支持振动接口时才设置为 true。然后，在我们想要引起振动的地方，只需将其包装在一个 if 块中，检查 canVibrate 是否为真：

  if (canVibrate) 
    navigator.vibrate(500);

发生的情况是，这将导致 Android 手机上的振动，而在 iPhone 上什么也不做。iPhone 不会振动，但它也不会使网站崩溃。

停止振动

可以通过调用来停止任何正在进行的振动navigator.vibrate(0);但是，引起如此大的振动或使用 setInterval() 似乎是一个坏主意，我们需要停止振动。

什么是navigator？

MDN 说

Navigator 界面代表用户代理的状态和身份。它允许脚本查询它并注册自己以进行某些活动。可以使用只读的 window.navigator 属性检索 Navigator 对象。

navigator 接口还为我们提供了许多其他的东西，比如navigator.geolocation可以用来获取地理定位对象并使用设备的位置。

TL;DR

使用 navigator.vibrate(500)（或其他毫秒数）在移动设备上引起振动。但它会导致 iPhone 崩溃，因为 Apple 不支持该接口，因此最好编写代码首先检查是否支持该接口。