详解JS判断页面是在手机端还是在PC端打开的方法

下面详细介绍一下如何判断页面是在手机端还是在PC端打开，并提供两条示例说明。

方法一：使用UA判断

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

js 复制代码

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端打开。下面是实现的代码：

html 复制代码

<!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，则会使用默认样式。

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

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