判断页面是在手机端还是在PC端打开的两种方法

最新推荐文章于 2025-03-20 20:50:19 发布

张先森-Gemini

最新推荐文章于 2025-03-20 20:50:19 发布

阅读量6.1k

点赞数 5

文章标签：笔记

本文链接：https://blog.csdn.net/weixin_61006919/article/details/131023803

版权

方法一：使用UA判断

UA(UserAgent)是指HTTP请求头中的一部分，用于标识客户端的一些信息，比如用户的设备类型、浏览器型号等等。因此，我们可以通过判断UA中的关键字来确定页面访问者的设备类型。下面是实现的代码：

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

if (isMobile) {
  console.log('当前在手机端');
} else {
  console.log('当前在PC端');
}

代码解析：

首先，我们使用正则表达式匹配navigator.userAgent中是否包含iPhone、iPad、iPod、Android这些关键字，如果匹配成功，则说明当前是在移动端。如果匹配失败，则说明当前是在PC端。

需要注意的是，该方法并不100%准确，因为用户可以使用PC浏览器模拟手机UA，也有可能使用移动端浏览器访问PC网站。

方法二：使用媒体查询判断

媒体查询是CSS3的一个新特性，可以根据不同的媒体类型（比如设备屏幕的宽度、高度、方向等）来设置不同的CSS样式。我们可以利用媒体查询来判断页面是在手机端还是在PC端打开。下面是实现的代码：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>判断页面是在手机端还是在PC端</title>
		<style>
			/* PC样式 */
			.pc-content {
				display: none;
			}

			/* 移动端样式 */
			.mobile-content {
				display: none;
			}

			/* 媒体查询 */
			@media (min-width: 768px) {

				/* PC样式 */
				.pc-content {
					display: block;
				}
			}

			@media (max-width: 767px) {

				/* 移动端样式 */
				.mobile-content {
					display: block;
				}
			}
		</style>
	</head>

	<body>
		<div class="pc-content">
			<!-- PC内容 -->
			<h1>这是PC端内容</h1>
			<p>只在PC端显示的内容</p>
		</div>
		<div class="mobile-content">
			<!-- 移动端内容 -->
			<h1>这是移动端内容</h1>
			<p>只在移动端显示的内容</p>
		</div>
	</body>
</html>

代码解析：

在CSS中，我们使用@media关键字定义了一个媒体查询，当浏览器宽度小于等于767px的时候，p元素的字体大小和颜色都会发生改变，从而实现了对移动端的识别。如果浏览器宽度大于767px，则会使用默认样式。

需要注意的是，该方法只能判断设备的屏幕宽度，不能确定设备的真实类型，因此并不太准确。

总的来说，两种方法各有优缺点，具体选择哪种方法要根据自己的需求和场景来决定。一般来说，如果只是想简单地判断页面访问者的设备类型，使用第一种方法即可。如果需要根据设备类型来优化网站的布局和样式，可以使用第二种方法。