目录
现在移动网站非常流行，有时候后端网页需要判断用户是使用手机浏览器还是笔记本电脑浏览器。 本文整理了JavaScript判断是否为手机浏览器的五种方式，并且通过示例代码介绍的特别详细，对于大家的学习或者工作有一定的参考学习价值。
1.导航器。 用户代理
最简单的方法也是最常见的技术是解析浏览器的用户代理字符串，其中包含设备信息。
JS通过navigator.userAgent属性获取这个字符串，只要包含mobi、android、iphone等关键字，就可以识别为联通设备。
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
// 当前设备是移动设备
}
// 另一种写法
if (
navigator.userAgent.match(/Mobi/i) ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/iPhone/i)
) {
// 当前设备是移动设备
}
这种方法的优点是简单方便，缺点是不可靠javascript 浏览器判断，因为用户可以改变这个字符串，让移动浏览器冒充桌面浏览器。
基于 Chromium 的浏览器也有一个 navigator.userAgentData 属性，它具有类似的效果。 不同的是，它将用户代理字符串解析为一个对象，该对象的mobile属性返回一个布尔值，表示用户是否使用中国联通设备。
const isMobile = navigator.userAgentData.mobile;
请注意，Apple 的 Safari 浏览器和 Firefox 浏览器不支持此属性，请查看 Caniuse 网站了解详细信息。
另外，还有一个早已弃用的 navigator.platform 属性，所有浏览器都支持该属性，因此也可以使用。 它返回一个表示用户操作系统的字符串。
if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
// 当前设备是移动设备
}
二、window.screen、window.innerWidth
另一种方法是通过屏幕的长度来判断是否是手机。
window.screen对象返回用户设备的屏幕信息，该对象的width属性是屏幕长度（以像素为单位）。
if (window.screen.width < 500) {
// 当前设备是移动设备
}
在上面的例子中，如果屏幕长度window.screen.width大于500像素，则认为是手机。
这种方法的缺点是如果手机横屏使用，则无法识别。
另一个属性window.innerWidth返回浏览器窗口上方网页可见部分的长度，更适合指定不同长度的网页的样式。
const getBrowserWidth = function() {
if (window.innerWidth < 768) {
return "xs";
} else if (window.innerWidth < 991) {
return "sm";
} else if (window.innerWidth < 1199) {
return "md";
} else {
return "lg";
}
};
3. 窗口方向
第三种方法是检测屏幕的方向。 手机屏幕的方向可以随时改变（水平或垂直），这是桌面设备上无法做到的。
window.orientation 属性用于获取屏幕的当前方向。 只有联通设备有此属性，桌面设备将返回undefined。
if (typeof window.orientation !== 'undefined') {
// 当前设备是移动设备
}
请注意，iPhone 的 Safari 浏览器不支持此属性。
四、触摸事件
第四种方式是移动浏览器的DOM元素可以通过ontouchstart属性指定触摸风暴的监听功能。 桌面设备没有此属性。
function isMobile() {
return ('ontouchstart' in document.documentElement);
}
// 另一种写法
function isMobile() {
try {
document.createEvent("TouchEvent"); return true;
} catch(e) {
return false;
}
}
5. window.matchMedia()
结合CSS来识别。
CSS 通过媒体查询指定网页的响应式样式。 如果针对手机的媒体查询语句生效，则可以认为当前设备是联通设备。
window.matchMedia() 方法接受 CSS 媒体查询语句作为参数，以确定该语句是否有效。
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
上面的例子中，window.matchMedia()的参数是一个CSS查询语句，这意味着它只对屏幕长度不超过700像素的设备有效。 它返回一个对象javascript 浏览器判断，其 matches 属性是布尔值。 如果为true，则说明查询有效，当前设备为手机。
除了通过屏幕的长度来判断之外，还可以通过手的准确度来判断。
let isMobile = window.matchMedia("(pointer:coarse)").matches;
在上面的例子中，CSS语句pointer:coarse表示当前设备的指针不准确。 由于手机不支持键盘，只支持触摸，所以满足这个条件。
某些设备支持多个指针，例如同时键盘和触摸。 pointer:coarse仅用于确定主指针，还有一个any-pointer命令用于确定所有指针。
let isMobile = window.matchMedia("(any-pointer:coarse)").matches;
上例中any-pointer:coarse表示在所有指针上，只要有一个指针不准确，就满足查询条件。
6. 工具包
除了里面的那些方法之外，你还可以使用别人写的工具包。 这里推荐使用React-device-detect，它支持多种细粒度的设备检测。
import {isMobile} from 'react-device-detect';
if (isMobile) {
// 当前设备是移动设备
}
