JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
我们一般在浏览器里识别用户的访问设备都是通过 user agent 这个字段来获取的,但是通过它我们只能获取一个大概的信息,比如你用的是 mac 还是 windows,用的是 iphone 还是 ipad。如果我想知道你用的是第几代 iphone,这个方法就不行了,前段时间我正好有这个需求,识别移动客户端的具体型号(主要是 ios 设备),于是思考了下这个问题的实现。
首先,我跟大家一样想到了 ua,不过事实证明这路走不通。就在我无聊一个一个摆弄浏览器的 api 时,突然一篇文章里的某段代码提醒了了我。这篇文章讲的是怎样通过 js 获取图形设备信息的,因为 html5 支持了 canvas,所以可以通过 api 获取图形设备的型号,比如显卡的型号。
(function () { var canvas = document.createelement('canvas'), gl = canvas.getcontext('experimental-webgl'), debuginfo = gl.getextension('webgl_debug_renderer_info'); console.log(gl.getparameter(debuginfo.unmasked_renderer_webgl)); })();
运行这段代码就可以获取显卡的型号了,如果你在ios的设备里运行,会获取到诸如 apple a9 gpu 之类的信息。而我们知道每一代 ios 设备的 gpu 型号都是不同的,比如 iphone 6 是 a8,而 iphone 6s 就是 a9。看到这里,你应该大概知道我的思路了,就是通过识别 gpu 的型号来辨别设备的型号。
不过这还有个小瑕疵,有些设备是同一代,也就是 gpu 型号完全相同,比如 iphone 6s, iphone 6s plus, iphone se。它们用的都是 apple a9 gpu,怎么区分开它们呢?你会发现它们最大的不同不就是分辨率不同吗?而通过 javascript 我们又可以方便地获取屏幕分辨率,这样把两个手段综合应用一下就可以获取设备的准确型号了。
这里有个示例网址,大家可以用手机访问
我的代码都放在了 github 上
这次思考给了我一些解决问题的启发,我们在思考解决方案的时候从侧面入手说不定会有新的发现。就比如我们的这个代码,目前还无法识别同一代的 ipad air 和 ipad mini,因为它们的 gpu 和分辨率均相同,但是延续这个思路其实是有很多解决方案的,比如大家可以研究下这两个设备的话筒和喇叭个数,而这个数量也是可以通过 js 获取的 :p
完整的测试代码
<html> <head> <title>mobile device example</title> <script src="./device.js"></script> </head> <head> <h1>gpu: <script>document.write(mobiledevice.getglrenderer());</script></h1> <h1>device models: <script>document.write(mobiledevice.getmodels().join(' or '));</script></h1> </head> </html>
device.js
(function () { var canvas, gl, glrenderer, models, devices = { "apple a7 gpu": { 1136: ["iphone 5", "iphone 5s"], 2048: ["ipad air", "ipad mini 2", "ipad mini 3"] }, "apple a8 gpu": { 1136: ["ipod touch (6th generation)"], 1334: ["iphone 6"], 2001: ["iphone 6 plus"], 2048: ["ipad air 2", "ipad mini 4"] }, "apple a9 gpu": { 1136: ["iphone se"], 1334: ["iphone 6s"], 2001: ["iphone 6s plus"], 2224: ["ipad pro (9.7-inch)"], 2732: ["ipad pro (12.9-inch)"] }, "apple a10 gpu": { 1334: ["iphone 7"], 2001: ["iphone 7 plus"] } }; function getcanvas() { if (canvas == null) { canvas = document.createelement('canvas'); } return canvas; } function getgl() { if (gl == null) { gl = getcanvas().getcontext('experimental-webgl'); } return gl; } function getscreenwidth() { return math.max(screen.width, screen.height) * (window.devicepixelratio || 1); } function getglrenderer() { if (glrenderer == null) { debuginfo = getgl().getextension('webgl_debug_renderer_info'); glrenderer = debuginfo == null ? 'unknown' : getgl().getparameter(debuginfo.unmasked_renderer_webgl); } return glrenderer; } function getmodels() { if (models == null) { var device = devices[getglrenderer()]; if (device == undefined) { models = ['unknown']; } else { models = device[getscreenwidth()]; if (models == undefined) { models = ['unknown']; } } } return models; } if (window.mobiledevice == undefined) { window.mobiledevice = {}; } window.mobiledevice.getglrenderer = getglrenderer; window.mobiledevice.getmodels = getmodels; })();
js获取手机型号和系统
想要通过js获取手机的一些基本参数,就要使用到navigator.useragent,通过我们可以获取到浏览器的一些基本信息。如果想在页面中看到navigator.useragent内容,我们可以使用document.write(navigator.useragent);打印到页面上,可以更清晰的看到具体内容。
1、下面是我打印的一些手机中的useragent内容:
1、iphone6 plus
mozilla/5.0 (iphone; cpu iphone os <span style="color:#ff0000;">10_2_1</span> like mac os x) applewebkit/602.4.6 (khtml, like gecko) mobile/14d27
iphone7 plus
mozilla/5.0 (iphone; cpu iphone os <span style="color:#ff0000;">10_3_1</span> like mac os x) applewebkit/603.1.30 (khtml, like gecko) mobile/14e304
2、魅族
mozilla/5.0 (linux; <span style="color:#ff0000;">android 5.1</span>; <span style="color:#3366ff;">m1 metal</span> 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; <span style="color:#ff0000;">android 6.0.1</span>; <span style="color:#3366ff;">sm-a8000</span> 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; <span style="color:#ff0000;">android 6.0.1</span>; <span style="color:#3366ff;">redmi note 4x</span> 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内容的具体含义和来源可以参考如下地址查看具体解释:
2、在网上查了下有木有现成的js能直接实现此功能,找到了一个mobile-detect.js。基本可以实现我们需要的参数,下载地址:
文档地址:
http://hgoebl.github.io/mobile-detect.js/doc/mobiledetect.html
使用方法:
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手机型号。下面是具体代码:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <title>js获取手机型号和系统</title> </head> <body> </body> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/mobile-detect.min.js"></script> <script> //判断数组中是否包含某字符串 array.prototype.contains = function(needle) { for (i in this) { if (this[i].indexof(needle) > 0) return i; } return -1; } var device_type = navigator.useragent;//获取useragent信息 document.write(device_type);//打印到页面 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);//打印系统版本和手机型号 </script> </html>
得到结果:
iphone ios10.21---iphone
android androidos6.01---redmi note 4x
下一篇: 大数据热 高端人才缺