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

如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的文章

18 条评论
Dont · 7月12日

话筒和喇叭个数,思路真是骨骼惊奇啊

+9 回复

0

js获取话筒和喇叭个数是怎么做的?

anosann · 4 天前
leungjz · 7月12日

安卓的怎么办?

+2 回复

3

还在todo list里。。。因为安卓的设备以及硬件型号是在是太太太多了。。。

joyqi 作者 · 7月12日
laoLiueizo · 7月13日

牛逼

+2 回复

莫名小晟 · 3 天前

论从前端入门到该行做硬件开发

+2 回复

0

准确的说是硬件软件都要懂啊

lvsijian8 · 3 天前
虫子 · 7月13日

那需要对机型配置很了解啊,而且有了新机型又要修改设置,太麻烦

+1 回复

0

同感

飓风 · 7月14日
小志 · 7月13日

这个只针对苹果还是全平台?

+1 回复

allen3039 · 7月13日

确实,思路比问题本身更有价值

+1 回复

landy2014 · 7月13日

虽然不能兼容全平台,但是这给我们提供了一种思路,感谢作者@joyqi

回复

小乐乐 · 7月13日

我觉得也是

回复

虫子 · 7月14日

为毛不直接让安卓和IOS厂商提供获取设备型号的方法啊

回复

hack · 7月14日

GPU: Adreno (TM) 530

Device Models: unknown

回复

0

哈哈哈哈哈笑死我了,我手机电脑都显示530一开始还以为url的问题了.手机是骁龙820的A530,电脑是6代u的HD530哈哈哈哈哈哈

lvsijian8 · 3 天前
0

@lvsijian8 小米5的820,不过自带的浏览器兼容性不好

hack · 2 天前
2tu2 · 1 天前

丰富兼容一下获取硬件信息就可以了,具体是什么设备反而无所谓

回复

载入中...
joyqi joyqi

12.3k 声望

发布于专栏

程序员就要好好玩

我的生涯一片无悔,想起那天夕阳下的奔跑,那是我逝去的青春aaaaa

39 人关注