JavaScript来检测是否为移动设备

在响应式项目里，需要对移动端进行特殊的业务逻辑判断，我们如何去判断呢?下面介绍几种方法：

方法1：使用window.matchmedia()方法

在JavaScript中，可以使用window.matchmedia()方法来检测基于CSS媒体查询的移动设备；这是检测移动设备的最佳和最简单的方法。

语法：

window.matchMedia();

示例：在移动设备上运行

<script>
	if(window.matchMedia("(max-width: 750px)").matches) {

		// 视图端口的宽度小于750像素
		document.write("这是一个移动设备。");
	} else {

		// 视图端口至少有750像素宽
		document.write("这是一个pc电脑端或平板。");
	}
</script>

判断设备的视图端口，如果宽度小于750像素则为移动设备。

方法2：使用navigator.userAgent属性

navigator.userAgent属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

示例：

<script>
	if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
		document.write("这是一个移动设备。");
	} else {
		document.write("这是一个pc电脑端。");
	}
</script>