前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS判断当前设备属于哪种客户端并让移动端可调试

JS判断当前设备属于哪种客户端并让移动端可调试

作者头像
用户3587585
发布2023-08-10 09:04:13
9530
发布2023-08-10 09:04:13
举报
文章被收录于专栏:阿福谈Web编程

引言

最近做的一个项目需要同时适配PC端和iPad及mobile移动端,由于PC端的设备屏幕宽度比iPad和mobile端大太多,因此页面布局需要进行区分。而前笔者在端项目中使用了vuevue-router进行开发,也就是说需要根据当前客户使用的设备属于哪种客户端让路由决定进入哪种设备适配的页面组件。因此需要在邻项目路由的入口处判断客户使用的设备是PC、iPad还是mobile。

另外Vue项目在PC端进行开发时,我们可以通过按住F12键进入开发者模式对代码进行调试;然而iPad和Mobile等移动端设备上运行的项目却无法通过移动设备自带的快捷键而进入调试模式查看打印日志和网络请求,而是需要我们安装额外的调试插件之后才能在移动设备上对源码进行调试,并查看打印日志和网络请求。

本文主要使用javascript代码判断当前设备属于何种客户端,并通过安装插件的方式让我们在移动端设备上也能查看前端项目打印的日志及网络请求,希望对读者朋友们有帮助。

1 判断当前设备属于何种客户端

1.1 通过navigator.userAgent判断

这是原生js的语句,可以直接拿来使用

代码语言:javascript
复制
// 返回由客户机发送服务器的user-agent 头部的值

const device = navigator.userAgent

//做判断 通过返回的数据来筛选查找关键信息

if (device.indexOf('iPad') > -1) {

// ipad

} else if (device.indexOf('Android') > -1 || device.indexOf('ios') > -1) {

// 手机

} else {

// 电脑
}

navigator属于浏览器内置的windows属性对象,上面的是笔者自己做的测试,但是发现安装Android系统的平板电脑直接走到了属于Mobile手机的判断分支,不是很准确。下面我们借用一个js库来更加准确的判断当前设备属于哪种客户端。

1.2 通过current-device库的API判断

1.2.1 项目中下载安装current-device

在我们的vue项目的根目录下通过鼠标右键->git bash 来打开一个命令控制台并执行如下安装current-device的命令

代码语言:javascript
复制
// cnpm
cnpm install current-device --save-dev

//yarn
yarn add current-device --save-dev
1.2.2 current-device库在vue项目中的使用

首先在我们的vue项目的路由入口文件rouoter.js中引入current-device库,然后直接调用current-device库的APPI方法判断当前设备属于何种客户端

代码语言:javascript
复制
import device from 'current-device'
import { createRouter, createWebHashHistory } from 'vue-router'
// 引入current-device库
import device from 'current-device'
// 引入移动端路由组件数组
import { routerM } from '@/router/routerM'
// 引入PC端路由组件数组
import { routerPc } from '@/router/routerPc'
// 引入iPad端路由组件数组
import {routerIPad} from '@/router/routerIPad'
// 引入公共方法
import { isLogin, isSafetyCode } from '@/utils/helper'

let deviceRoute = null
if(device.ipad()){
   // 平板电脑端
   deviceRoutes = routerIPad
} else if(device.mobile()){
  // 移动手机端
  deviceRoutes = routerM
} else {
  // PC端
  deviceRoutes = routerPc
}
window.device = device
// 创建路由实例对象
const router = createRouter({
  history: createWebHashHistory(),
  routes: deviceRoutes,
  scrollBehavior() {
    return { left: 0, top: 0 }
  }
})
// 路由守卫
router.beforeEach(async (to, from, next) => {
  if(to.path=='/demo' || to.path=='/notice' || to.path=='/annoncement'){
    next()
  }
  if (!isSafetyCode() && to.path !== '/search') {
    next('/search')
    return
  }
  if (isSafetyCode() && !isLogin() && to.path !== '/login') {
    next('/login')
    return
  }
  next()
  return
})
// 暴露vue-router路由实例
export default router

1.2.3 current-device库参考API方法

设备

js方法

描述

Mobile

device.mobile()

判断是否属于手机移动设备方法

Tablet

device.tablet()

Desktop

device.desktop()

判断是否属于PC客户端

iOS

device.ios()

判断是否属于iOS客户端

iPad

device.ipad()

判断是否属于平板电脑

iPhone

device.iphone()

判断是否数据iPhone手机

iPod

device.ipod()

判断是否属于iPod设备

Android

device.android()

判断是否属于Android系统设备

Android Phone

device.androidPhone()

判断是否属于安卓手机

Android Tablet

device.androidTablet()

BlackBerry

device.blackberry()

BlackBerry Phone

device.blackberryPhone()

BlackBerry Tablet

device.blackberryTablet()

Windows

device.windows()

判断是否属于windows系统PC客户端

Windows Phone

device.windowsPhone()

判断是否属于windows系统平板电脑客户端

Windows Tablet

device.windowsTablet()

Firefox OS

device.fxos()

判断是否属于火狐系统PC客户端

Firefox OS Tablet

device.fxosTablet()

MeeGo

device.meego()

Television

device.television()

一般对于Web项目开发,我们常用的current-device库API方法也就device.mobile()、device.ipad()、device.desktop()和device.windows()四个方法,有时为了区分设备属于何种系统会要用到device.iPhone()和device.android()用以区分移动设备属于iOS还是iPhone系统,不久后,current-device库很可能还会新增支持判断华为鸿蒙系统设备的API方法。

1.2.4 current-device支持的设备

  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets

2 安装移动端调试插件

2.1 vconsole

安装vconsole插件

代码语言:javascript
复制
// cnpm
cnpm install vconsole --save-dev

// yarn
yarn add vconsole  --save-dev

vue项目入口文件main.js中引入vconsole并使用

代码语言:javascript
复制
import VConsole from 'vconsole'
// 构建VConsol实例e实例
const vConsole = new VConsole();

// 使用可选项属性初始化, log.maxLogNumber参数表示控制台中最大显示的日志行数
const vConsole = new VConsole({'log.maxLogNumber': 2000});

// 打印日志
console.log('Hello world');

// 完成调试后移除vconsoloe
vConsole.destroy();

项目运行起来的时候设备屏幕上会显示如下vConsole的图标

2.2 Eruda

Eruda的功能相对来说要比vconsole更加友好

如果想要更加详细的配置,可以链接跳转至gitHub页面进行查看

2.3.1 安装Eruda
代码语言:javascript
复制
// cnpm
cnpm install eruda --save-dev

// yarn
yarn add eruda --save-dev
2.3.2 引用并使用Eruda

在main.js文件中引入并初始化化Eruda

代码语言:javascript
复制
import eruda from 'eruda'

//初始化
eruda.init()
```

同样,项目运行起来的时候也会在设备的屏幕上显示eruda的图标

3 运行项目并测试效果

在 vue.config.js 中配置主机名和端口号

代码语言:javascript
复制
module.exports = {

    devServer: {

        host: '0.0.0.0',
        port: '3000'
    }

}

然后将我们的vue项目构建打包后部署到服务器上的nginx服务中就可以测试效果了

笔者的vue项目中使用的VConsole插件

3.1 平板电脑端效果

点击右下角绿色的vConsole图标按钮就可以进入调试模式

选中Log Tab就可以查看系统控制台打印的日志,在command一栏里还可以输入js变量,输入完后点击该栏右侧的OK按钮就会打印变量到Log 控制台中;选中右边的Network 可以查看网络请求;选中Elementk 可以查看网页元素。

3.2 手机移动端效

点击右下角的绿色vConsole图标按钮进入调试模式

写文不易,欢迎读者小伙伴们动动你的手指点个赞和右下角的【在看】,谢谢!

--END--

4 参考阅读

【1】js分别判断手机、电脑、iPad(https://juejin.cn/post/7033793636760453133)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-06-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 阿福谈Web编程 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引言
  • 1 判断当前设备属于何种客户端
    • 1.1 通过navigator.userAgent判断
      • 1.2 通过current-device库的API判断
        • 1.2.1 项目中下载安装current-device
        • 1.2.2 current-device库在vue项目中的使用
      • 1.2.3 current-device库参考API方法
        • 1.2.4 current-device支持的设备
        • 2 安装移动端调试插件
          • 2.1 vconsole
            • 2.2 Eruda
              • 2.3.1 安装Eruda
              • 2.3.2 引用并使用Eruda
          • 3 运行项目并测试效果
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档