Generally, we identify users in the browser to access devices through the User Agent field, but through it we can only obtain a rough information, such as whether you are using a Mac or Windows, or an iPhone or iPad. If I want to know which generation of iPhone you are using, this method will not work. Some time ago, I happened to have this requirement 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 thought of UA like everyone else, but it turns out that this path is not working. Just when I was bored fiddling with the browser's API one by one, a piece of code in an article reminded me. This article talks about how to obtain graphics device information through js. Because HTML5 supports canvas, you can obtain the model of the graphics device, such as the graphics card model through the API.
(function () {
var canvas = ('canvas'),
gl = ('experimental-webgl'),
debugInfo = ('WEBGL_debug_renderer_info');
((debugInfo.UNMASKED_RENDERER_WEBGL));
})();
Run this code to get the graphics card model. If you run it on an iOS device, you will get information such as Apple A9 GPU. And we know that the GPU models of each generation of iOS devices are different, such as the iPhone 6 is A8, while the iPhone 6s is A9. After seeing this, you should roughly know my idea, which is to identify the model of the device by identifying the model of the GPU.
However, there is a small flaw. Some devices are of the same generation, that is, the GPU models are exactly the same, such as iPhone 6s, iPhone 6s Plus, iPhone SE. They all use Apple A9 GPUs, how to distinguish them? You will find that the biggest difference between them is the difference in resolutions? Through JavaScript, we can easily obtain the screen resolution, so that the two methods can be applied in a comprehensive way to obtain the accurate model of the device.
Here is a sample URL, you can access it on your mobile phone
/mobile-device-js/
My code is placed on GitHub
/joyqi/mobile-device-js
This thought gave me some inspiration to solve problems. When we think about solutions, we may find new discoveries from the side. For example, our code is currently unable to identify the same generation of iPad Air and iPad mini because their GPU and resolution are the same, but there are actually many solutions to continue this idea. For example, you can study the number of microphones and speakers of these two devices, and this number can also be obtained through JS:P
Complete test code
<html>
<head>
<title>Mobile Device Example</title>
<script src="./"></script>
</head>
<head>
<h1>GPU: <script>(());</script></h1>
<h1>Device Models: <script>(().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 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 = ('canvas');
}
return canvas;
}
function getGl() {
if (gl == null) {
gl = getCanvas().getContext('experimental-webgl');
}
return gl;
}
function getScreenWidth() {
return (, ) * ( || 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 ( == undefined) {
= {};
}
= getGlRenderer;
= getModels;
})();
JS get mobile phone model and system
If you want to obtain some basic parameters of your phone through js, you must use it. Through us, we can obtain some basic information about the browser. If we want to see the content on the page, we can use (); to print it on the page to see the specific content more clearly.
1. Here are some userAgent contents on mobile phones I printed:
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
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 iPhone fields, and the system version field is marked red above. 2, 3, and 4 are the userAgent contents of several Android phones. If you look closely, it is not difficult to find that Android 5.1 and other systems are the system versions. The blue one is the phone model. As for other content, including browser versions, etc., no explanation is given here. If you want to know the specific meaning and source of this userAgent content, you can refer to the following address to view the specific explanation:
Why do all browser userAgents bring Mozilla
2. I checked online whether there are ready-made js that can directly implement this function and found one. Basically, we can implement the parameters we need, download address:
/hgoebl//
Document address:
//doc/
How to use:
var md = new MobileDetect(
'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
' Build/4..0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
' Version/4.0 Mobile Safari/534.30');
// more typically we would instantiate with ''
// as user-agent; this string literal is only for better understanding
( () ); // 'Sony'
( () ); // 'Sony'
( () ); // null
( () ); // 'Safari'
( () ); // 'AndroidOS'
( ('iPhone') ); // false
( ('bot') ); // false
( ('Webkit') ); // 534.3
( ('Build') ); // '4..0.562'
( ('playstation|xbox') ); // false
There is no problem with iOS during use, you can get whatever you want, but not everything you want to get. So Android was processed separately. I found that there was a Build/... behind the Android phone models. So I used this to process it separately to get the Android phone model. Here 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>JSGet mobile phone model and system</title>
</head>
<body>
</body>
<script src="js/lib/jquery-1.11."></script>
<script src="js/lib/"></script>
<script>
//Judge whether the array contains a string = function(needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0)
return i;
}
return -1;
}
var device_type = ;//Get userAgent information (device_type);//Print to page var md = new MobileDetect(device_type);//Initialize mobile-detect var os = ();//Get the system var model = "";
if (os == "iOS") {//Disposal of ios system os = () + ("iPhone");
model = ();
} else if (os == "AndroidOS") {//Android system processing os = () + ("Android");
var sss = device_type.split(";");
var i = ("Build/");
if (i > -1) {
model = sss[i].substring(0, sss[i].indexOf("Build/"));
}
}
alert(os + "---" + model);//Print the system version and mobile phone model</script>
</html>
Get the result:
iphone iOS10.21---iPhone
android AndroidOS6.01---Redmi Note 4X