如何使用 JavaScript 检测移动设备？
在本教程中，我们将学习如何使用 JavaScript 检测我们正在使用的移动设备。
方法 1：使用 navigator.userAgent 属性
要使用 JavaScript 检测移动设备，我们将使用包含有关浏览器的所有信息的窗口导航器对象。我们将用于检测移动设备的属性将是 userAgent 属性，该属性用于返回浏览器发送到服务器的用户代理标头。我们从此属性收到的值是浏览器名称、版本和平台，即您将使用此函数获得的有关移动设备的所有信息。
语法
使用 JavaScript 检测移动设备的语法如下 -
window.navigator.userAgent ; 或 navigator.userAgent ;
步骤
使用 JavaScript 检测移动设备的步骤如下 -
创建一个按钮并将其与名为 myfunction 的函数链接。
现在在函数中我们将创建一个 if 循环。
在 if 循环中，我们将使用 navigator.userAgent 属性编写一些条件来检测任何移动设备。
我们编写的条件将匹配每种类型的移动设备，例如 android、webOS、iPad、iPhone、iPod、BlackBerry 和 windows Phone。
检查所有条件后，如果找到任何移动设备，它将返回 true。
如果没有找到任何移动设备，我们将在'a' 变量使用 else 循环。
最后打印与 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 开发人员工具选择手机选项来运行代码。当您进入开发人员工具的移动区域时，您可以从那里的移动设备列表中选择任何手机作为模拟器，以使用上述代码检测手机的存在。
运行代码时，窗口中会出现一个名为"检查"的按钮，单击即可检测到手机。如果代码在任何移动设备上运行，则输出将为真，否则为假。
方法 2
但是这种用户代理方法不是使用 JavaScript 检测移动设备的最佳方法，因为用户代理字符串很容易被欺骗。因此，我们还可以使用 window.orientation 方法使用 JavaScript 检测移动设备，此方法检查设备视口的方向。它为我们提供某些度数值，如 - 90、0、90、180，所有这些值都表示不同的视口。如果视口的值大于 0，则表示该设备是移动设备，否则不是移动电话。
注意 − 此功能已弃用，不再推荐使用
使用 JavaScript 检测移动设备的步骤如下 −
创建一个按钮并将其与名为"myfunction"的函数链接。
现在在脚本标记内，我们将定义该函数。
创建一个名为 answer 的变量，并在其中使用 window.orientation 方法来检查方向值是否大于 -1。
在下一行中，我们将调用 alert 方法，如果 answer 变量的值大于 -1，则该方法将值打印为"它是移动电话"为真。
否则，值将显示为"这不是手机"。
示例
我们可以使用以下 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 开发人员工具。
如果代码在模拟器移动设备上运行，则我们会收到"这是一部手机"的警报，否则，我们将获得"这不是一部手机"的输出。
