详解JS判断页面是在手机端还是在PC端打开的方法
下面详细介绍一下如何判断页面是在手机端还是在PC端打开，并提供两条示例说明。
方法一：使用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>
<head>
<meta charset="UTF-8"/>
<title>判断页面是在手机端还是在PC端</title>
<style>
/* 默认样式 */
p {
font-size: 24px;
color: yellow;
}
/* 移动端样式 */
@media (max-width: 767px) {
p {
font-size: 20px;
color: green;
}
}
</style>
</head>
<body>
<p>测试内容</p>
</body>
</html>
代码解析：
在CSS中，我们使用@media关键字定义了一个媒体查询，当浏览器宽度小于等于767px的时候，p元素的字体大小和颜色都会发生改变，从而实现了对移动端的识别。如果浏览器宽度大于767px，则会使用默认样式。
需要注意的是，该方法只能判断设备的屏幕宽度，不能确定设备的真实类型，因此并不太准确。
总的来说，两种方法各有优缺点，具体选择哪种方法要根据自己的需求和场景来决定。一般来说，如果只是想简单地判断页面访问者的设备类型，使用第一种方法即可。如果需要根据设备类型来优化网站的布局和样式，可以使用第二种方法。
作者：RuiRay
来源：juejin.cn/post/7273746154642014262
来源：juejin.cn/post/7273746154642014262
