JavaScript code for obtaining mobile device models (JS for obtaining mobile phone models and systems) and javascriptjs

JavaScript code for obtaining mobile device models (JS for obtaining mobile phone models and systems) and javascriptjs

Generally, the User Agent field is used to identify the User's access device in the browser. However, we can only obtain one rough information, such as Mac or Windows, the iPhone or iPad is used. If I want to know how many generations of iPhone you are using, this method will not work. I had this requirement some time ago to identify the specific model of the mobile client (mainly iOS devices ), so I thought about the implementation of this problem.

First of all, I think of UA like everyone else, but it turns out that this road cannot be achieved. When I was bored with the browser APIs one by one, a piece of code in an article suddenly reminded me. This article describes how to obtain information about a graphic device through js. Because HTML5 supports canvas, you can obtain the model of the graphic device through APIS, such as the model of the video card.

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

Run this code to get the model of the video card. If you run it on an iOS device, you will get information such as the Apple A9 GPU. We know that the GPU models of each generation of iOS devices are different. For example, iPhone 6 is A8, While iPhone 6 s is A9. Here, you should probably know how to identify the device model by recognizing the GPU model.

However, there is still a flaw. Some devices are of the same generation, that is, the GPU models are identical, such as iPhone 6 s, iPhone 6 s Plus, and iPhone SE. They all use Apple A9 GPUs. How can they be separated? Do you find that the biggest difference between them is the difference in resolution? Through JavaScript, we can easily obtain the screen resolution, so that the two methods can be integrated to obtain the accurate model of the device.

Here is an example URL that can be accessed by a mobile phone.
Https://joyqi.github.io/mobile-device-js/example.html

My code is on GitHub.
Https://github.com/joyqi/mobile-device-js

This thought gave me some inspiration to solve the problem. We may find new discoveries when thinking about the solution. Just like our code, we still cannot identify the iPad Air and iPad mini of the same generation, because they have the same GPU and resolution, however, there are actually many solutions to continue with this idea. For example, you can study the number of microphones and speakers for the two devices, which can also be obtained through JS: P

Complete Test code

Device. js
(function () {  var canvas, gl, glRenderer, models,    devices = {      "Apple A7 GPU": {        1136: ["iPhone 5", "iPhone 5s"],        2048: ["iPad Air", "iPad Mini 2", "iPad Mini 3"]      },      "Apple A8 GPU": {        1136: ["iPod touch (6th generation)"],        1334: ["iPhone 6"],        2001: ["iPhone 6 Plus"],        2048: ["iPad Air 2", "iPad Mini 4"]      },      "Apple A9 GPU": {        1136: ["iPhone SE"],        1334: ["iPhone 6s"],        2001: ["iPhone 6s Plus"],        2224: ["iPad Pro (9.7-inch)"],        2732: ["iPad Pro (12.9-inch)"]      },      "Apple A10 GPU": {        1334: ["iPhone 7"],        2001: ["iPhone 7 Plus"]      }    };  function getCanvas() {    if (canvas == null) {      canvas = document.createElement('canvas');    }    return canvas;  }  function getGl() {    if (gl == null) {      gl = getCanvas().getContext('experimental-webgl');    }    return gl;  }  function getScreenWidth() {    return Math.max(screen.width, screen.height) * (window.devicePixelRatio || 1);  }  function getGlRenderer() {    if (glRenderer == null) {      debugInfo = getGl().getExtension('WEBGL_debug_renderer_info');      glRenderer = debugInfo == null ? 'unknown' : getGl().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);    }    return glRenderer;  }  function getModels() {    if (models == null) {      var device = devices[getGlRenderer()];      if (device == undefined) {        models = ['unknown'];      } else {        models = device[getScreenWidth()];        if (models == undefined) {          models = ['unknown'];        }      }    }    return models;  }  if (window.MobileDevice == undefined) {    window.MobileDevice = {};  }  window.MobileDevice.getGlRenderer = getGlRenderer;  window.MobileDevice.getModels = getModels;})();
JS get mobile phone model and System
To get some basic parameters of the mobile phone through js, we need to use navigator. userAgent, through which we can get some basic information about the browser. If you want to see the content of navigator. userAgent on the page, you can use document. write (navigator. userAgent); print it to the page to see the specific content more clearly.
1. Below are some of the userAgent content I printed on my mobile phone:

 

 
  
1. iPhone 6 plus
Mozilla/5.0 (iPhone; CPU iPhone OS <span style = "color: # ff0000;"> 10_2_1 </span> like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) mobile/14D27

Iphone7 plus
Mozilla/5.0 (iPhone; CPU iPhone OS <span style = "color: # ff0000;"> 10_3_1 </span> like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) mobile/14E304

2. meizu
Mozilla/5.0 (Linux; <span style = "color: # ff0000;"> Android 5.1 </span>; <span style = "color: # 3366ff; "> m1 metal </span> Build/LMY47I) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.127 Mobile Safari/537.36

3. Samsung
Mozilla/5.0 (Linux; <span style = "color: # ff0000;"> Android 6.0.1 </span>; <span style = "color: # 3366ff; "> SM-A8000 </span> Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36

4. Xiaomi
Mozilla/5.0 (Linux; <span style = "color: # ff0000;"> Android 6.0.1 </span>; <span style = "color: # 3366ff; "> Redmi Note 4X </span> Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36

 
From the above we can see that the iphone contains the iPhone field, and the system version field is marked with red above. 2, 3, and 4 are the userAgent content of several Android phones. It is not difficult to find that Android 5.1 is the system version. The blue is the mobile phone model. Other content, including the browser version, is not explained here. If you want to know the specific meaning and source of the userAgent content, refer to the following link to view the specific explanation:
Why does the userAgent of all browsers contain Mozilla?

2, on the Internet to check the wood ready-made js can directly achieve this function, find a mobile-detect.js. We can basically implement the required parameters ,:
Https://github.com/hgoebl/mobile-detect.js/

Document address:
Http://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html

Usage:
var md = new MobileDetect(   'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +   ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +   ' Version/4.0 Mobile Safari/534.30');  // more typically we would instantiate with 'window.navigator.userAgent' // as user-agent; this string literal is only for better understanding  console.log( md.mobile() );     // 'Sony' console.log( md.phone() );      // 'Sony' console.log( md.tablet() );     // null console.log( md.userAgent() );    // 'Safari' console.log( md.os() );       // 'AndroidOS' console.log( md.is('iPhone') );   // false console.log( md.is('bot') );     // false console.log( md.version('Webkit') );     // 534.3 console.log( md.versionStr('Build') );    // '4.1.A.0.562' console.log( md.match('playstation|xbox') ); // false 
There is no problem in using ios. You can obtain all you want, but not Android. Therefore, Android is processed separately. We found that the Android mobile phone model was followed by a Build /.... Therefore, the Android mobile phone model is obtained separately. The code below is as follows:
<! DOCTYPE html> 
Expected result:
Iphone iOS10.21 --- iPhone
Android AndroidOS6.01 --- Redmi Note 4X