js分别判断手机、电脑、iPad

您所在的位置：网站首页 › js判断是安卓手机还是苹果手机 › js分别判断手机、电脑、iPad

js分别判断手机、电脑、iPad

2024-02-15 08:44| 来源: 网络整理| 查看: 265

这是我参与11月更文挑战的第2天

我自己大多数的项目使用的技术栈是vue方向，所以下面基本使用方式都可以拿来即用。

但是在说这个问题之前，我们要学会两件事：

在移动端运行展示vue项目，因为如果我们进行移动端调试就要打包上传的话会很麻烦，所以我们可以将vue项目直接运行到移动端设备来展示在非PC端打印日志，因为我们在调试的过程中，pc端我们可以在Chrome浏览器的F12调试模式下打印，但是移动端就不行了。下面补充一下两种移动端打印日志的方法。移动端展示vue项目

前提是在连在同一个wifi或局域网下，如果没有条件可以手机开热点也可以的

步骤：在 vue.config.js 中配置如下 module.exports = { devServer: { host: '0.0.0.0', } } 运行vue项目

用network的地址在手机浏览器中打开即可移动端打印日志方案一：vconsole 下载 //npm npm install vconsole //yarn yarn add vconsole 引入 import VConsole from 'vconsole' 使用 const vConsole = new VConsole(); // or init with options const vConsole = new VConsole({ maxLogNumber: 1000 }); // 和往常一样直接调用 console.log('Hello world'); // remove it when you finish debugging vConsole.destroy(); 测试

成功会显示如图的标志

方案二：Eruda

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

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

下载 //npm npm install eruda --save yarn yarn add eruda --save 引入 //main.js 引入 import eruda from 'eruda' //初始化 eruda.init() 使用 console.log('测试eruda') 扩展

如果不想通过npm的方式引入，可以直接使用cdn来进行引入

把下面的代码贴到public/index.html 中，然后进行直接打印即可

引入成功会显示如图的图形icon

判断手机、电脑、iPad 方案一：navigator.userAgent

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

亲测mac、ipad、oppo手机，如果

// 返回由客户机发送服务器的user-agent 头部的值 const device = navigator.userAgent //做判断通过返回的数据来筛选查找关键信息 if (device.indexOf('iPad') > -1) { // ipad } else if (device.indexOf('Android') > -1 || device.indexOf('ios') > -1) { // 手机 } else { // 电脑 }

上面的是我自己做的测试，但是不一定全面适配所有机型，如果有朋友自己做了测试可以反馈进行修改和完善

下面我们使用js库来进行判断设备

方案二：device.js

下面是vue项目中开发的步骤，按步骤操作即可

下载 //npm npm install current-device //yarn yarn add current-device main.js引入 import device from 'current-device' 使用

直接调用方法即可

if (device.mobile()) { console.log('移动手机') } else if (device.ipad()) { console.log('ipad') } else if (device.desktop()) { console.log('电脑') } 参考方法(根据自身需求调用和判断) DeviceJavaScript MethodMobiledevice.mobile()Tabletdevice.tablet()Desktopdevice.desktop()iOSdevice.ios()iPaddevice.ipad()iPhonedevice.iphone()iPoddevice.ipod()Androiddevice.android()Android Phonedevice.androidPhone()Android Tabletdevice.androidTablet()BlackBerrydevice.blackberry()BlackBerry Phonedevice.blackberryPhone()BlackBerry Tabletdevice.blackberryTablet()Windowsdevice.windows()Windows Phonedevice.windowsPhone()Windows Tabletdevice.windowsTablet()Firefox OSdevice.fxos()Firefox OS Phonedevice.fxosPhone()Firefox OS Tabletdevice.fxosTablet()MeeGodevice.meego()Televisiondevice.television() DEVICE SUPPORT iOS: iPhone, iPod, iPad Android: Phones & Tablets Blackberry: Phones & Tablets Windows: Phones & Tablets Firefox OS: Phones & Tablets

【本文地址】

js分别判断手机、电脑、iPad

js分别判断手机、电脑、iPad

今日新闻

推荐新闻