document.write(navigator.userAgent)試一試

前幾天看到過一個(gè)取巧的方法，通過調(diào)用手機(jī)GPU的信息來獲得相信的型號(hào)信息；
來源：joyqi
https://segmentfault.com/a/11...

我們一般在瀏覽器里識(shí)別用戶的訪問設(shè)備都是通過 User Agent 這個(gè)字段來獲取的，但是通過它我們只能獲取一個(gè)大概的信息，比如你用的是 Mac 還是 Windows，用的是 iPhone 還是 iPad。如果我想知道你用的是第幾代 iPhone，這個(gè)方法就不行了，前段時(shí)間我正好有這個(gè)需求，識(shí)別移動(dòng)客戶端的具體型號(hào)（主要是 iOS 設(shè)備），于是思考了下這個(gè)問題的實(shí)現(xiàn)。

首先，我跟大家一樣想到了 UA，不過事實(shí)證明這路走不通。就在我無聊一個(gè)一個(gè)擺弄瀏覽器的 API 時(shí)，突然一篇文章里的某段代碼提醒了了我。這篇文章講的是怎樣通過 js 獲取圖形設(shè)備信息的，因?yàn)?HTML5 支持了 canvas，所以可以通過 API 獲取圖形設(shè)備的型號(hào)，比如顯卡的型號(hào)。

(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));

})();

運(yùn)行這段代碼就可以獲取顯卡的型號(hào)了，如果你在iOS的設(shè)備里運(yùn)行，會(huì)獲取到諸如 Apple A9 GPU 之類的信息。而我們知道每一代 iOS 設(shè)備的 GPU 型號(hào)都是不同的，比如 iPhone 6 是 A8，而 iPhone 6s 就是 A9?？吹竭@里，你應(yīng)該大概知道我的思路了，就是通過識(shí)別 GPU 的型號(hào)來辨別設(shè)備的型號(hào)。

不過這還有個(gè)小瑕疵，有些設(shè)備是同一代，也就是 GPU 型號(hào)完全相同，比如 iPhone 6s, iPhone 6s Plus, iPhone SE。它們用的都是 Apple A9 GPU，怎么區(qū)分開它們呢？你會(huì)發(fā)現(xiàn)它們最大的不同不就是分辨率不同嗎？而通過 JavaScript 我們又可以方便地獲取屏幕分辨率，這樣把兩個(gè)手段綜合應(yīng)用一下就可以獲取設(shè)備的準(zhǔn)確型號(hào)了。

這里有個(gè)示例網(wǎng)址，大家可以用手機(jī)訪問

https://joyqi.github.io/mobil...

我的代碼都放在了 GitHub 上

https://github.com/joyqi/mobi...

這次思考給了我一些解決問題的啟發(fā)，我們?cè)谒伎冀鉀Q方案的時(shí)候從側(cè)面入手說不定會(huì)有新的發(fā)現(xiàn)。就比如我們的這個(gè)代碼，目前還無法識(shí)別同一代的 iPad Air 和 iPad mini，因?yàn)樗鼈兊?GPU 和分辨率均相同，但是延續(xù)這個(gè)思路其實(shí)是有很多解決方案的，比如大家可以研究下這兩個(gè)設(shè)備的話筒和喇叭個(gè)數(shù)，而這個(gè)數(shù)量也是可以通過 JS 獲取的