美文网首页
2022-04-01 JS获取手机型号和系统

2022-04-01 JS获取手机型号和系统

作者: 追寻1989 | 来源:发表于2022-04-01 11:03 被阅读0次

想要通过js获取手机的一些基本参数，就要使用到navigator.userAgent，通过我们可以获取到浏览器的一些基本信息。如果想在页面中看到navigator.userAgent内容，我们可以使用document.write(navigator.userAgent);打印到页面上，可以更清晰的看到具体内容。

1、下面是我打印的一些手机中的userAgent内容：

1、iphone6 plus 
Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27
 
iphone7 plus
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14E304
 
2、魅族
Mozilla/5.0 (Linux; Android 5.1; m1 metal Build/LMY47I) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.127 Mobile Safari/537.36
 
3、三星
Mozilla/5.0 (Linux; Android 6.0.1; SM-A8000 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36
 
4、小米
Mozilla/5.0 (Linux; Android 6.0.1; Redmi Note 4X Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36

从上面我们可以看出iphone的里面都含有iPhone字段，系统版本字段为上面标红的地方。2、3、4是几款Android手机的userAgent内容，仔细观察不难发现Android 5.1等就是系统版本。而蓝色的就是手机型号。至于其他内容，包含浏览器版本等，这里不做解释。如果想知道这个userAgent内容的具体含义和来源可以参考如下地址查看具体解释：
为什么所有浏览器的userAgent都带Mozilla

2、在网上查了下有木有现成的js能直接实现此功能，找到了一个mobile-detect.js。基本可以实现我们需要的参数，下载地址：

https://github.com/hgoebl/mobile-detect.js/
文档地址：

http://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html
使用方法：

// 引入CDN
<script src="https://lib.baomitu.com/mobile-detect/1.4.5/mobile-detect.min.js" charset="utf-8" ></script>

var md = new MobileDetect(
    'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30');
 
// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding
 
console.log( md.mobile() );          // 'Sony'
console.log( md.phone() );           // 'Sony'
console.log( md.tablet() );          // null
console.log( md.userAgent() );       // 'Safari'
console.log( md.os() );              // 'AndroidOS'
console.log( md.is('iPhone') );      // false
console.log( md.is('bot') );         // false
console.log( md.version('Webkit') );         // 534.3
console.log( md.versionStr('Build') );       // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false

使用过程中ios没有什么问题，想获取的都可以获取到，不过Android并不是都能获取到。所以又对Android的做了单独处理。发现Android手机型号后面都带了一段Build/... ，所以就以此做了下单独处理，来获取Android手机型号。下面是具体代码：

/**
 * 获取设备和系统信息
 * @returns environment
 */
export function getMobSysInfo() {
  Array.prototype.contains = function (needle) {
    for (i in this) {
      if (this[i].indexOf(needle) > 0) return i
    }
    return -1
  }

  let device_type = navigator.userAgent //获取userAgent信息
  let md = new MobileDetect(device_type) //初始化mobile-detect
  let os = md.os() //获取系统
  let 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')
    let sss = device_type.split(';')
    var i = sss.contains('Build/')
    if (i > -1) {
      model = sss[i].substring(0, sss[i].indexOf('Build/'))
    }
  }
  return {
    os,
    model
  }
}

当然，这并不百分百准确和可靠。。如果不需要非常严谨的业务已经够用

相关文章