作者：Vincy。最后修改于2022年9月20日。
如果你正在寻找一个客户端的解决方案来检测移动设备，你的搜索到此为止:-)。有一些属性可以通过使用JavaScript在客户端进行检测。
下面列出两种检测当前设备是否为移动设备的方法。
- 通过使用JavaScript window.matchMedia()方法。
- 通过使用navigator.userAgent属性。
这两种方法都是使用JavaScript的基本方法来创建移动设备检测器的代码。
- 通过使用JavaScript window.matchMedia()方法
与使用JavaScript navigator.userAgent的方法相比，这个方法是最好的。因为userAgent是一个可以由终端用户配置的设置。他们可以改变它!
matchmedia.html
快速实例
function isMobileDevice() {
return window
.matchMedia("only screen and (max-width: 760px)").matches;
}
if (isMobileDevice()) {
document.write("Detected device is a mobile.");
} else {
document
.write("Detected device is not a mobile.");
}
matchMedia() JavaScript自定义方法被用来做这个移动设备检测。
它接受一个媒体查询字符串并返回一个对象。这个对象将包含当前设备的媒体属性及其相关度。
然后，这个对象被用来寻找当前设备的媒体属性与传递的媒体查询之间的匹配。
这个程序发送的媒体查询包含一个预期的移动设备的最大宽度。
如果当前设备的媒体屏幕属性与这个参数相匹配，那么这个JavaScript函数返回一个布尔值true。
用CSS进行媒体匹配
这也可以通过CSS而不是JavaScript来完成。按照下面的步骤，用CSS来实现这个功能。
- 在HTML标记中用style='display:none'保留两个可能的信息。
- 用@media screen和（max-width: 600px）编写CSS媒体查询部分。
- 根据屏幕宽度来显示和隐藏适当的UI通知元素。
How to Detect Mobile Device using JavaScript
Detected device is a mobile.
Detected device is not a mobile.
- 通过使用navigator.userAgent属性
另一种方法是用于检查当前的userAgent，以检测它是否是一个移动设备。
在下面的例子中，*isMobileDevice()*函数用一个regex模式进行测试。regex包含了一个移动设备的userAgent的最可能的值。
我们已经在一个JavaScript电子邮件验证工具中使用了regex模式匹配。
该脚本将当前设备的userAgent属性与该模式进行比较。如果找到了匹配，那么这个函数就会返回真，以打印出相应的结果。
navigator.html
How to Detect Mobile Device using JavaScript
How to Detect Mobile Device using JavaScript
Note: Browser users can change value of "userAgent" via UA
spoofing. So be aware of that and do not use this feature to
provide a critical function of your website.
注意： 浏览器用户可以通过UA欺骗来改变 "userAgent "的值。所以要注意这一点，不要使用这个功能来提供你网站的关键功能。
