, we usually recognize the user's access devices in the browser, all through the User Agent field, but we can only get a rough information through it, such as whether you use Mac or Windows, iPhone or iPad. If I want to know that you are using the next generation of iPhone, this method is out of order. I had this demand just now, identifying the specific type of the mobile client (mainly iOS device), so I thought about the realization of the next problem.

first, I think of UA like everyone, but it turns out that the road is out of the way. Just as I was bored with the API of a browser, a piece of code in an article reminded me. This article is about how to get graphic device information through JS, because HTML5 supports canvas, so we can get the type of graphics device through API, such as the type of graphics 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));}); 


) to run the code can access to graphics models, if you run on iOS devices that will get to the Apple A9 GPU such as such information. We know that the GPU model of each generation of iOS devices is different, for example, iPhone 6 is A8, and iPhone 6S is A9. When you see this, you should probably know what I'm thinking about, by identifying the model of the device by identifying the model of GPU.

, however, has a small flaw. Some devices are the same generation, that is, the GPU model is exactly the same, such as iPhone 6S, iPhone 6S Plus, iPhone SE. They are Apple A9 GPU, how to separate them? Will you find that their biggest difference is not the difference in resolution? And through JavaScript, we can easily get the screen resolution, so that we can get the exact model of the device by combining the two means. Here is an example of

web site, you can visit the

I use mobile phone code on GitHub

this thinking gives me some inspiration to solve the problem, our solution time from the side maybe there will be a new start in the thinking. For example, our code is still unable to identify with the generation of iPad Air and iPad mini, because their GPU and resolution are the same, but the continuation of this idea is in fact there are many solutions, for example, we can study the two devices, the microphone and the speaker number, but this number also can pass JS: P

 < complete test code; html> < head> < title> Mobile Device Example< /title> < script src= "./device.js" > < /script> < < head> head> < h1> GPU: < script> document.write (MobileDevice.getGlRenderer ()); < /script> < /h1> < h1> Device Models: < script> document.write (MobileDevice.getModels) (.Join ('or')); < /script> < /h1> < /head> < /html> 


 (function) {var (canvas, GL, glRenderer, models, devices = {"Apple A7 GPU": 1136: {[iPhone 5], "iPhone 5S", 2048: "iPad" Air "," iPad Mini, "iPad Mini 2" 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 (9.7-inch) [Pro], "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) return GL ('experimental-webgl');};} function {return (getScreenWidth) 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) return glRenderer (debugInfo.UNMASKED_RENDERER_WEBGL);};} function (getModels) {if (models = = null) {var = devices[getGlRenderer (device)]; 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 and

type mobile phone access system to get through the mobile phone JS some of the basic parameters, will be used to navigator.userAgent, we can get some basic information browser. If you want to see the navigator.userAgent content in the page, we can use document.write (navigator.userAgent); print to the page, you can see the specific content more clearly.

1, here is the userAgent content of some mobile phone I printed in


1, iphone6 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

Mozilla/5.0, Meizu (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

Mozilla/5.0 4, millet (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 iPhone which contain the iPhone field, the field is above the standard version system red place. 2, 3, 4 is a few Android mobile phone userAgent content, careful observation is not difficult to find Android 5.1 and so on is the system version. And the blue one is the model of the mobile phone. As for other contents, including the browser version, there is no explanation here. If you want to know the specific meaning and origin of the contents of the userAgent can refer to the following address:

why all userAgent browser with Mozilla

2, in the online search under the wooden shelf JS can directly realize the function, find a mobile-detect.js. The basic parameters can be achieved, we need to download the address:

document address:


http:/ /hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html

 var MD usage: new = MobileDetect ('Mozilla/5.0 (Linux U; Android; 4.0.3; en-in; SonyEricssonMT11i'the' 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' this string literal / / as user-agent; is only for better understanding console.log (md.mobile) ('Sony'(console.log); / / (md.phone)); / /'Sony'(md.tablet) (console.log); / / 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 

in the process of using IOS do not have what problem, want to get all can get to, but it is not able to get to Android. So Android has been treated separately. It was found that the Android phone model had a section of Build/ behind it. So we do this on a separate basis to get the Android phone model. The following is the specific code:

 < DOCTYPE html> <!; html> < head> < meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8 /> < meta; name=" viewport "content=" width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no > < title> JS; access to mobile phone models and < /title> < /head> < body> < /body> < script src= "js/lib/jquery-1.11.1.min.js" > < /script> < script src= "js/lib/mobile-detect.min.js" > < /script> < script> / / judgment is contained in a string array Array.prototype.contains = {for (function (needle) I in this (this[i].indexOf) {if (needle) > 0) return I return -1;}}; VAR device_ty PE = navigator.userAgent; / / get userAgent information document.write (device_type); / / print to page var MD = new MobileDetect (device_type); / / mobile-detect var OS = md.os (initialization); / / Acquisition System VAR model = ""; if (OS = = "iOS") {//ios system OS = md.os (+ md.version) ("iPhone"); model = md.mobile (else);} if (OS = = "AndroidOS") {//Android system OS = md.os (+) md.version ("Android"); VAR SSS = device_type.split (";"); VAR I = sss.contains ("Build/"); if (I > -1 {model = sss[i].substring (0), sss[i].indexOf ("Build/"));}} (OS + alert + model "---"); / / print system version and mobile phone model < /script> < /html> 

This concludes the body part