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

Posted 2021-04-17 前端大全

来源：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

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

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