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

苏丹发布于2019-08-21 11:46 / 1202人阅读

摘要：看到这里，你应该大概知道我的思路了，就是通过识别的型号来辨别设备的型号。不过这还有个小瑕疵，有些设备是同一代，也就是型号完全相同，比如。

我们一般在浏览器里识别用户的访问设备都是通过 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/mobil...

我的代码都放在了 GitHub 上
https://github.com/joyqi/mobi...

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

云服务器 GPU云服务器 js获取移动设备宽高设备型号 javascript思路加密服务设备型号说明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87097.html

2017-07-13 前端日报

摘要：前端日报精选饿了么的升级实践专题之深浅拷贝思路清奇通过获取移动设备的型号正则表达式完整教程略长掘金中的关键词中文第期字号与行高译任何网站都可以成为渐进式网络应用但我们需要做的更好掘金年学习最好的书籍众成翻译行代码实现模板引擎 2017-07-13 前端日报精选饿了么的PWA升级实践JavaScript专题之深浅拷贝思路清奇：通过 JavaScript 获取移动设备的型号 - Seg...

LucasTwilight 2019-08-21 11:47 评论0 收藏0
详解英特尔转型战略：从PC转向云计算和物联网

摘要：说到这，英特尔下一批比当前更高端的和将会在今年最后一个季度出货，主攻高性能平板电脑和上网本市场。过去，英特尔一直为智能手机和平板电脑厂商提供芯片，通过联合营销的方式获取利润。不得不承认，英特尔的移动战略失败了，或许是没有照顾好而错失了机会。　　提到英特尔，在PC处理器行业几乎无人不知，但是在移动市场努力多年却无法达到同样的水平。长期以来，英特尔只能通过几款基于自家Atom处理器和调制解调器的...

tommego 2019-04-29 17:09 评论0 收藏0
SRECon Day1 | 比起干货满满，更吸引我的是画风清奇

摘要：第一天下来的感觉就是高大上，组织者高大上，赞助商们谷歌，，微软，，，，，等高大上，更高大上就是会议地点旧金山，美的让人乐不思京霾了。强力推荐来自的，原因是在旧金山听了场精彩绝伦的相声，由和共同完成，不分捧逗。 SRECon17 第一天下来的感觉就是高大上，组织者 USENIX （ Advanced Computing Systems Association ）高大上，赞助商们（谷歌，...

kaka 2019-05-28 17:02 评论0 收藏0
SRECon Day1 | 比起干货满满，更吸引我的是画风清奇

摘要：第一天下来的感觉就是高大上，组织者高大上，赞助商们谷歌，，微软，，，，，等高大上，更高大上就是会议地点旧金山，美的让人乐不思京霾了。强力推荐来自的，原因是在旧金山听了场精彩绝伦的相声，由和共同完成，不分捧逗。 SRECon17 第一天下来的感觉就是高大上，组织者 USENIX （ Advanced Computing Systems Association ）高大上，赞助商们（谷歌，...

jsbintask 2019-06-28 15:41 评论0 收藏0