前端判断页面是在PC端还是移动端打开-CFANZ编程社区

在前端判断页面是在 PC 端还是移动端打开，有多种方法，以下是一些常见的方式：

1.通过 user - agent（用户代理）字符串判断

原理：

浏览器在向服务器发送请求时，会在请求头中包含一个名为 “User - Agent” 的字段。这个字段包含了关于浏览器、操作系统和设备类型等信息。通过解析这个字符串，可以获取设备相关的线索，从而判断是 PC 端还是移动端。

示例代码（使用 JavaScript）：

function detectDevice() {
  var userAgent = navigator.userAgent.toLowerCase();
  if (/mobile|android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)) {
    console.log("移动端");
  } else {
    console.log("PC端");
  }
}
detectDevice();

在上述代码中，首先获取navigator.userAgent并转换为小写字母形式。然后使用正则表达式来检查这个字符串中是否包含常见的移动端相关的关键字，如 “mobile”“android”“iphone” 等。如果包含这些关键字，就判断为移动端；否则，判断为 PC 端。

2.使用媒体查询（Media Queries）间接判断

原理：

媒体查询是 CSS3 中的一种技术，它允许根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的样式规则。虽然媒体查询本身主要用于样式布局，但可以通过在 JavaScript 中检查某些媒体查询条件是否匹配来推断设备类型。

示例代码（使用 JavaScript 和 CSS 媒体查询结合）：

首先在 CSS 中定义媒体查询：

/* 定义一个适用于小屏幕设备（移动端）的样式类 */
@media screen and (max - width: 767px) {
 .mobile - only {
    display: block;
  }
}

然后在 JavaScript 中检查这个样式类是否应用：

function checkDeviceViaMediaQuery() {
  var mobileOnlyClass = document.createElement('div');
  mobileOnlyClass.className ='mobile - only';
  document.body.appendChild(mobileOnlyClass);
  var isMobile = window.getComputedStyle(mobileOnlyClass).display === 'block';
  document.body.removeChild(mobileOnlyClass);
  if (isMobile) {
    console.log("移动端");
  } else {
    console.log("PC端");
  }
}
checkDeviceViaMediaQuery();

这段代码通过在 JavaScript 中创建一个带有特定移动端样式类（.mobile - only）的元素，将其添加到文档中，然后检查这个元素的计算样式中的display属性是否为block（因为在移动端媒体查询条件下该类的display被设置为block）。如果是，则判断为移动端；否则，判断为 PC 端。最后，将这个临时元素从文档中移除。

3.使用第三方库判断

原理：

有一些专门用于设备检测的第三方库，这些库通常会综合考虑多种因素（如用户代理、设备特性等）来进行更准确的设备类型判断，并且提供了更多的设备相关信息，如设备型号、操作系统版本等。

示例（以detect.js库为例）：

首先需要引入detect.js库（可以通过在 HTML 文件中添加<script src="detect.js"></script>来引入）。
然后使用以下代码进行判断：

var detector = new MobileDetect(window.navigator.userAgent);
if(detector.mobile()){
  console.log("移动端");
} else {
  console.log("PC端");
}