如何使用JavaScript来检测是否为移动设备？

最新推荐文章于 2024-08-07 10:12:47 发布

m0_59635805

最新推荐文章于 2024-08-07 10:12:47 发布

阅读量2.6k

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_59635805/article/details/122414881

版权

如何使用JavaScript来检测是否为移动设备？下面本篇文章就来给大家介绍一下使用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>