思路清奇：經過 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