如何使用 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 开发人员工具。
如果代码在模拟器移动设备上运行,则我们会收到"这是一部手机"的警报,否则,我们将获得"这不是一部手机"的输出。