Nuxt 判断 手机 ipad pc 三端
一、js 判断
根据浏览器ua判断当前是否为移动设备：
middleware中间件执行流程顺序：
1、nuxt.config.js
2、匹配布局
3、匹配页面
项目根目录下新建 middleware 文件夹，新建 midd.js 文件
export default function ({ isServer, req, redirect, route }) {
const os = (function() {
const ua = req ? req.headers['user-agent'] : navigator.userAgent || '',
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet =
/(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc,
}
})()
if (os.isAndroid || os.isPhone) {
console.log('手机')
} else if (os.isTablet) {
console.log('平板')
} else if (os.isPc) {
console.log('电脑')
}
}
然后在 nuxt.config.js加上对应配置：
router: {
middleware: ['midd']
},
这样的话在每个页面渲染前都会调用midd.js，如果不需要每个页面都判断的话可以在需要判断跳转的页面里面写，然后把nuxt.config.js里面的去掉。
二、device.js 插件判断
- 下载
//npm
npm install current-device
//yarn
yarn add current-device
vue 在 main.js引入，Nuxt 在哪里用，哪里引入，例如，middleware 中间件
import device from 'current-device'
- 使用
if (device.mobile()) {
console.log('移动手机')
} else if (device.ipad()) {
console.log('ipad')
} else if (device.desktop()) {
console.log('电脑')
}
- API 参考
| Device | JavaScript Method |
|---|---|
| Mobile | device.mobile() |
| Tablet | device.tablet() |
| Desktop | device.desktop() |
| iOS | device.ios() |
| iPad | device.ipad() |
| iPhone | device.iphone() |
| iPod | device.ipod() |
| Android | device.android() |
| Android Phone | device.androidPhone() |
| Android Tablet | device.androidTablet() |
| BlackBerry | device.blackberry() |
| BlackBerry Phone | device.blackberryPhone() |
| BlackBerry Tablet | device.blackberryTablet() |
| Windows | device.windows() |
| Windows Phone | device.windowsPhone() |
| Windows Tablet | device.windowsTablet() |
| Firefox OS | device.fxos() |
| Firefox OS Phone | device.fxosPhone() |
| Firefox OS Tablet | device.fxosTablet() |
| MeeGo | device.meego() |
| Television | device.television() |
