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

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