如何通过JavaScript检测移动设备？

在本教程中，我们将学习如何使用JavaScript检测我们正在使用的移动设备。

方法1：使用navigator.userAgent属性

为了使用JavaScript检测移动设备，我们将使用window navigator对象，该对象包含有关浏览器的所有信息。我们将使用的属性是userAgent属性，该属性用于返回浏览器发送到服务器的用户代理标头。从该属性接收到的值是浏览器的名称、版本和平台，即您可以使用此函数获取有关移动设备的所有信息。

语法

使用JavaScript检测移动设备的语法如下所示−

window.navigator.userAgent ;
or
navigator.userAgent ;

步骤

使用JavaScript检测移动设备的步骤如下：

创建一个按钮并将其链接到名为myfunction的函数。
现在在函数中创建一个if循环。
在if循环中，使用navigator.userAgent属性编写一些条件来检测任何移动设备。
我们编写的条件将找到每种类型的移动设备的匹配，如android、webOS、iPad、iPhone、iPod、BlackBerry和windows Phone。
在检查所有条件之后，如果找到任何移动设备，它将返回true。
如果没有找到任何移动设备，则使用else循环将’a’变量设为false。
最后，在具有id result的段落标签上链接的answer变量中打印出a的值，以在屏幕上打印true或false的值。

示例

我们可以使用以下HTML代码来使用JavaScript检测移动设备：

<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center;">
   <button id="browse" onclick="myfunction()"> Check</button>
   <p id="result">
   </p>
   <script>
      var a;
      var answer = document.getElementById("result"); function myfunction() {
         if (navigator.userAgent.match(/Android/i)
         || navigator.userAgent.match(/webOS/i)
         || navigator.userAgent.match(/iPhone/i)
         || navigator.userAgent.match(/iPad/i)
         || navigator.userAgent.match(/iPod/i)
         || navigator.userAgent.match(/BlackBerry/i)
         || navigator.userAgent.match(/Windows Phone/i)) {
            a = true ;
         } else {
            a = false ;
         }
         answer.innerHTML = a;
      }
   </script>
</body>
</html>

注意 − 如要从上述代码中获得“true”作为输出，需要使用Chrome开发者工具运行代码，并选择手机选项。当进入开发者工具的手机区域后，您可以从存在的移动设备列表中选择任何手机作为模拟器，以便使用上述代码来检测移动设备的存在。

运行代码后，窗口上将出现一个名为“Check”的按钮，点击该按钮即可检测移动设备。如果代码在任何移动设备上运行，则输出将为true，否则为false。

方法2

但是，使用JavaScript检测移动设备的用户代理方法并不是最佳方法，因为用户代理字符串可以很容易被篡改。因此，我们还可以使用 window.orientation 方法使用JavaScript检测移动设备，该方法检测设备视口的方向。它以度数提供了一些值，如 – 90、0、90、180，所有这些值表示不同的视口。如果视口的值大于0，则表示该设备是移动设备，否则它不是移动电话。

注意 − 此功能已被弃用，不再建议使用

使用JavaScript检测移动设备的步骤如下所示：

创建一个按钮，并将其与名为’myfunction’的函数关联起来。
现在，在script标记中，我们将定义该函数。
创建一个名为answer的变量，其中我们将使用window.orientation方法来检查方向值是否大于-1。
在下一行，我们将调用alert方法，如果answer变量的值为true，则输出值将打印为“It is a mobile phone”。
否则，值将显示为“It is not a mobile phone”。

示例

我们可以使用以下HTML代码来使用JavaScript检测移动设备 −

<!DOCTYPE html>
<html>
<head>
</head>
   <body style="text align:center;">
   <button id="browse" onclick="myfunction()">Check</button>
   <script>
      function myfunction() {
         var answer = window.orientation > 1;
         alert(answer ? 'It is a mobile device' : 'It is not a mobile device');
      }
   </script>
</body>
</html>

注意 − 要检查这段代码的输出，我们需要使用上面的代码中使用的Chrome开发者工具。

如果代码在模拟器手机上运行，则会弹出警告”这是一部手机”，否则，我们将得到输出”这不是一部手机”。