前言

工作中我们可能会遇到各种需求,例如:要通过前端的写的某一个页面去获取当前登录设备的信息,其实很简单,下边我就教大家如何获取!!


一、设备信息要如何获取?

这里我提供两种方案获取,根据个人习惯提取使用:

1.通过js直接获取

2.通过mobile-detect.js获取

二、使用步骤

(1)方法一

代码如下(示例):

let webLog = {}
	let userAgent = navigator.userAgent
	// 获取微信版本
	let m1 = userAgent.match(/MicroMessenger.*?(?= )/)
	if (m1 && m1.length > 0) {
	  webLog.wechat = m1[0]
	}
	// 苹果手机
	if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
	  // 获取设备名
	  if (userAgent.includes('iPad')) {
	    webLog.device = 'iPad'
	  } else {
	    webLog.device = 'iPhone'
	  }
	  // 获取操作系统版本
	  m1 = userAgent.match(/iPhone OS .*?(?= )/)
	  if (m1 && m1.length > 0) {
	    webLog.system = m1[0]
		console.log(webLog.system)
	  }
	}
	// 安卓手机
	if (userAgent.includes('Android')) {
	  // 获取设备名
	  m1 = userAgent.match(/Android.*; ?(.*(?= Build))/)
	  if (m1 && m1.length > 1) {
	    webLog.device = m1[1]
		console.log(webLog.device)
	  }
	  // 获取操作系统版本
	  m1 = userAgent.match(/Android.*?(?=;)/)
	  if (m1 && m1.length > 0) {
	    webLog.system = m1[0]
	  }
	}

(2)方法2

1.引入库

访问:https://www.npmjs.com/ 搜索mobile-detect 并引入

2.获取数据

代码如下(示例):

//判断数组中是否包含某字符串
Array.prototype.contains = function(needle) {
	for (i in this) {
		console.log(this[i])
		if (this[i].indexOf(needle) > 0)
			return i;
	}
	return -1;
}

var device_type = navigator.userAgent;//获取userAgent信息

var md = new MobileDetect(device_type);//初始化mobile-detect
var os = md.os();//获取系统
var model = "";

if (os == "iOS") {//ios系统的处理
	os = md.os() + md.version("iPhone");
	model = md.mobile();
} else if (os == "AndroidOS") {//Android系统的处理
	os = md.os() + md.version("Android");
	var sss = device_type.split(";");
	var i = sss.contains("Build/");
	if (i > -1) {
		model = sss[i].substring(0, sss[i].indexOf("Build/"));
	}
}
alert(os + "---" + model);//打印系统版本和手机型号

这样就轻轻松松拿到想要的数据了。


总结

例如:以上就是今天要讲的内容,如有疑惑或问题可以私信询问。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐