vue判断移动端和pc端

在开发 Web 应用时，我们通常需要针对移动端和 PC 端分别进行优化，以提供更好的用户体验。Vue.js 是一种流行的 JavaScript 框架，它提供了一些方法来判断当前运行的设备是移动端还是 PC 端。

一、基于浏览器 user-agent 判断

在 Vue.js 中，可以通过 navigator.userAgent 属性获取当前浏览器的 user-agent 信息。通过分析 user-agent 字符串，我们可以得到当前设备的信息，从而判断是移动端还是 PC 端。

具体实现方法如下：

```javascript

export const isMobile = () => {

const userAgentInfo = navigator.userAgent;

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

let isMobile = false;

for (let i = 0, len = mobileAgents.length; i < len; i++) {

if (userAgentInfo.indexOf(mobileAgents[i]) > 0) {

isMobile = true;

break;

}

}

return isMobile;

};

```

上述代码中，我们首先获取了 navigator.userAgent 信息，然后定义了一个数组 mobileAgents，其中包含了一些常见的移动设备 user-agent 字符串。接着，我们遍历这个数组，如果当前 user-agent 包含了数组中的任意一个字符串，则说明当前设备是移动端，返回 true；否则，返回 false。

二、基于屏幕宽度判断

另一种常见的判断方法是通过屏幕宽度来判断当前设备是移动端还是 PC 端。在 Vue.js 中，我们可以使用 window.screen.width 属性获取当前屏幕的宽度。如果屏幕宽度小于一定的阈值，则认为当前设备是移动端。

具体实现方法如下：

```javascript

export const isMobile = () => {

const screenWidth = window.screen.width;

const mobileWidth = 768; // 移动端屏幕宽度阈值

return screenWidth < mobileWidth;

};

```

上述代码中，我们首先获取了当前屏幕的宽度，然后定义了一个移动端屏幕宽度阈值 mobileWidth。如果当前屏幕宽度小于 mobileWidth，则认为当前设备是移动端，返回 true；否则，返回 false。

三、基于 CSS 媒体查询判断

除了前面两种方法，还可以使用 CSS 媒体查询来判断当前设备是移动端还是 PC 端。在 Vue.js 中，我们可以通过动态添加一个 style 标签来实现媒体查询。

具体实现方法如下：

```javascript

export const isMobile = () => {

const style = document.createElement("style");

style.type = "text/css";

style.innerHTML = "@media (max-width: 768px) { #isMobile { display: block; } }";

document.head.appendChild(style);

const div = document.createElement("div");

div.id = "isMobile";

document.body.appendChild(div);

const isMobile = window.getComputedStyle(div).display === "block";

document.head.removeChild(style);

document.body.removeChild(div);

return isMobile;

};

```

上述代码中，我们首先创建了一个 style 元素，然后动态添加了一个媒体查询规则，当屏幕宽度小于 768px 时，显示一个 id 为 isMobile 的 div 元素。接着，我们创建了这个 div 元素，并添加到了 body 中。然后，我们获取这个 div 元素的 computedStyle，判断其 display 属性是否为 block，如果是，则认为当前设备是移动端，返回 true；否则，返回 false。最后，我们将添加的 style 和 div 元素从 DOM 中移除。

总结

在 Vue.js 中，我们可以使用浏览器 user-agent、屏幕宽度或 CSS 媒体查询等方法来判断当前设备是移动端还是 PC 端。具体选择哪种方法，可以根据实际需求和性能要求来进行选择。