4种方法！前端判断页面是在PC端还是移动端打开

在写前端的过程中，有时候考虑适配与页面权限等问题的时候，需要涉及到用户访问的设备情况，下面将介绍几种常见的判断页面是在PC端还是移动端打开的方法。

方法1. 基于 <code>navigator.userAgent 的方法

这种方法是通过检查浏览器的 navigator.userAgent 字符串来判断设备类型。虽然这种方法不是非常精确（因为 userAgent 可以被篡改），但对于大多数情况来说是足够的。

示例代码

function isMobile() { -- -->

const userAgentInfo = navigator.userAgent;

const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

const mobileFlag = mobileAgents.some((mobileAgent) => {

return userAgentInfo.indexOf(mobileAgent) > 0;

});

return mobileFlag;

}

console.log(isMobile() ? '移动端' : 'PC端');

方法2. 使用媒体查询

媒体查询是 CSS3 提供的一种方法，可以根据不同的设备特性应用不同的样式规则。通过 JavaScript，你可以监听窗口大小的变化来判断设备类型。

示例代码

function checkDeviceType() {

const isMobile = window.matchMedia('(max-width: 768px)').matches; // 768px 是一个常见的平板设备宽度

console.log(isMobile ? '移动端' : 'PC端');

}

// 初始检测

checkDeviceType();

// 监听窗口大小变化

window.addEventListener('resize', checkDeviceType);

方法3. 使用第三方库

有些第三方库提供了更复杂的设备检测功能，例如 detect.js。这些库通常会提供更详细的设备信息。

示例代码

首先安装 detect.js:

npm install detect.js

然后在你的代码中使用：

import detect from 'detect.js';

function isMobile() {

return detect.device.type === 'phone' || detect.device.type === 'tablet';

}

console.log(isMobile() ? '移动端' : 'PC端');

方法4. 使用框架提供的工具

如果你使用的是像 Vue.js 这样的框架，可能会有社区提供的插件来帮助你检测设备类型。例如，在 Vue 中，你可以使用 vue-device-detect 插件。

示例代码

首先安装 vue-device-detect:

npm install vue-device-detect

然后在你的 Vue 组件中使用：

import { device } from 'vue-device-detect';

export default {

mounted() {

console.log(device.isMobile ? '移动端' : 'PC端');

}

}

注意事项

兼容性和准确性：userAgent 的检测方法可能不够准确，因为用户代理可以被篡改。响应式设计：现代 Web 设计倾向于采用响应式布局，而不是依赖于设备检测。性能影响：频繁地检测设备类型可能会对性能产生影响，尤其是在移动设备上。

在实际应用中，通常建议使用响应式设计来适应不同设备，而不是显式地检测设备类型。然而，在某些特定场景下，如需要加载不同资源或提供不同的用户体验时，设备检测仍然是有用的。