微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

思路清奇:通过 JavaScript 获取移动设备的型号

2018-03-09 17:00 前端大全

(点击上方公众号,可快速关注)


来源:joyqi

https://segmentfault.com/a/1190000010157682


我们一般在浏览器里识别用户的访问设备都是通过 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 我们又可以方便地获取屏幕分辨率,这样把两个手段综合应用一下就可以获取设备的准确型号了。


这里有个示例网址,大家可以用手机访问

https://joyqi.github.io/mobile-device-js/example.html


我的代码都放在了 GitHub 上

https://github.com/joyqi/mobile-device-js


这次思考给了我一些解决问题的启发,我们在思考解决方案的时候从侧面入手说不定会有新的发现。就比如我们的这个代码,目前还无法识别同一代的 iPad Air 和 iPad mini,因为它们的 GPU 和分辨率均相同,但是延续这个思路其实是有很多解决方案的,比如大家可以研究下这两个设备的话筒和喇叭个数,而这个数量也是可以通过 JS 获取的 :P



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 JavaScript 反调试技巧 1000 多个项目中的十大 JavaScript 错误以及如何避免 别天真了,第三方 CSS 并不安全 分享手淘过年项目中采用到的前端技术 前端简洁并实用的工具类函数封装
猜您喜欢 持续集成中nexus的那些事儿(一) PostgreSQL中BRIN和BTREE索引的比较(一) 平安金融科技移动技术周报(第十七期) 一次线上TCP连接超时错误分析 为什么程序员们喜欢写脚本?