我們一般在瀏覽器裡識別使用者的訪問裝置都是通過 User Agent 這個欄位來獲取的，但是通過它我們只能獲取一個大概的資訊，比如你用的是 Mac 還是 Windows，用的是 iPhone 還是 iPad。如果我想知道你用的是第幾代 iPhone，這個方法就不行了，前段時間我正好有這個需求，識別移動客戶端的具體型號（主要是 iOS 裝置），於是思考了下這個問題的實現。
首先，我跟大家一樣想到了 UA，不過事實證明這路走不通。就在我無聊一個一個擺弄瀏覽器的 API 時，突然一篇文章裡的某段程式碼提醒了了我。這篇文章講的是怎樣通過 js 獲取圖形裝置資訊的，因為 HTML5 支援了 canvas，所以可以通過 API 獲取圖形裝置的型號，比如顯示卡的型號。
|
1 2 3 4 5 6 7 |
(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