In diesem Artikel wird hauptsächlich der Implementierungscode von JavaScript vorgestellt, um das Modell für mobile Geräte zu erhalten.
Wir identifizieren das Zugriffsgerät des Benutzers im Browser normalerweise über das Feld „Benutzeragent“. Allerdings können wir dadurch nur allgemeine Informationen erhalten, z. B. ob Sie einen Mac oder Windows verwenden und ob Sie ein iPhone oder iPad verwenden. Wenn ich wissen möchte, welche iPhone-Generation Sie verwenden, funktioniert diese Methode nicht. Vor einiger Zeit musste ich das spezifische Modell des mobilen Clients (hauptsächlich iOS-Geräte) identifizieren, also habe ich über die Implementierung nachgedacht dieses Problems.
Zuerst habe ich, wie alle anderen auch, an UA gedacht, aber es stellte sich heraus, dass dieser Weg nicht funktionieren wird. Gerade als es mir langweilig war, eine nach der anderen an der API des Browsers herumzufummeln, erinnerte mich plötzlich ein bestimmter Codeabschnitt in einem Artikel daran. In diesem Artikel geht es darum, wie man Grafikgeräteinformationen über js erhält. Da HTML5 Canvas unterstützt, kann das Modell des Grafikgeräts, beispielsweise das Modell der Grafikkarte, über die API abgerufen werden.
(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));
})();Nach dem Login kopieren
Führen Sie diesen Code aus, um das Grafikkartenmodell zu erhalten. Wenn Sie ihn auf einem iOS-Gerät ausführen, erhalten Sie so etwas wie Apple A9 GPU-Informationen. Und wir wissen, dass das GPU-Modell jeder Generation von iOS-Geräten unterschiedlich ist. Beispielsweise ist das iPhone 6 A8 und das iPhone 6s A9. Wenn Sie das sehen, sollten Sie wahrscheinlich meine Idee kennen, das Modell des Geräts durch die Identifizierung des GPU-Modells zu identifizieren.
Es gibt jedoch einen kleinen Fehler: Einige Geräte sind von derselben Generation, das heißt, die GPU-Modelle sind genau gleich, wie zum Beispiel iPhone 6s, iPhone 6s Plus und iPhone SE. Sie alle verwenden die Apple A9 GPU. Wie kann man sie unterscheiden? Sie werden feststellen, dass der größte Unterschied nicht in der Auflösung liegt? Über JavaScript können wir die Bildschirmauflösung leicht ermitteln, sodass wir durch die Kombination der beiden Methoden das genaue Modell des Geräts erhalten.
Hier ist eine Beispiel-URL, Sie können mit Ihrem Mobiltelefon darauf zugreifen
https://joyqi.github.io/mobile-device-js/example.html
Ich habe es eingegeben Alle meine Codes auf GitHub
https://github.com/joyqi/mobile-device-js
Dieser Gedanke hat mich zum Lösen von Problemen inspiriert. Wir beginnen von der Seite Vielleicht gibt es neue Entdeckungen. Beispielsweise kann unser Code derzeit das iPad Air und das iPad mini derselben Generation nicht identifizieren, da sie über dieselbe GPU und Auflösung verfügen. Es gibt jedoch viele Lösungen, um diese Idee fortzusetzen. Sie können beispielsweise die Anzahl der Mikrofone untersuchen und Lautsprecher des Geräts, und diese Nummer kann auch über JS:P
Vollständiger Testcode
<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>Nach dem Login kopieren
Gerät js<🎜 erhalten werden >
(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;
})();Nach dem Login kopieren
JS ruft das Telefonmodell und -system ab
Wenn Sie einige grundlegende Parameter des Telefons über js erhalten möchten, Nur um navigator.userAgent zu verwenden, können wir einige grundlegende Informationen über den Browser abrufen. Wenn wir den Inhalt von navigator.userAgent auf der Seite sehen möchten, können wir ihn mit document.write(navigator.userAgent) auf die Seite drucken, damit wir den spezifischen Inhalt klarer sehen können.
1. Das Folgende ist der UserAgent-Inhalt in einigen Mobiltelefonen, die ich gedruckt habe:
1. iphone6 plus
Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 wie Mac OS 10_3_1 wie Mac OS Mozilla/5.0 (Linux; Android 5.1; m1 Metal Build/ LMY47I) AppleWebKit/537.36 (KHTML, wie Gecko ) Version/4.0 Chrome/40.0.2214.127 Mobile Safari/537.36
3. Samsung
Mozilla/5.0 (Linux; Android 6.0.1< /span>; SM-A8000 Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, wie Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari /537.36
4. Xiaomi
Mozilla/5.0 (Linux; Android 6.0.1; Redmi Note 4X Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/ 537.36
Von oben Wir können sehen, dass das iPhone-Feld das iPhone-Feld enthält und das Systemversionsfeld oben rot markiert ist. 2, 3 und 4 sind die UserAgent-Inhalte mehrerer Android-Mobiltelefone. Wenn Sie genau hinschauen, ist es nicht schwer herauszufinden, dass Android 5.1 usw. die Systemversionen sind. Das blaue ist das Telefonmodell. Für andere Inhalte, einschließlich Browserversion usw., wird hier keine Erklärung abgegeben. Wenn Sie die spezifische Bedeutung und Quelle dieses UserAgent-Inhalts wissen möchten, können Sie sich an die folgende Adresse wenden, um eine detaillierte Erklärung zu erhalten:
Warum werden die UserAgents aller Browser mit Mozilla geliefert?
2、在网上查了下有木有现成的js能直接实现此功能，找到了一个mobile-detect.js。基本可以实现我们需要的参数，下载地址：
https://github.com/hgoebl/mobile-detect.js/
文档地址：
http://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html
使用方法：
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
Nach dem Login kopieren
使用过程中ios没有什么问题，想获取的都可以获取到，不过Android并不是都能获取到。所以又对Android的做了单独处理。发现Android手机型号后面都带了一段Build/...。所以就以此做了下单独处理，来获取Android手机型号。下面是具体代码：
<!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获取手机型号和系统</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>
//判断数组中是否包含某字符串
Array.prototype.contains = function(needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0)
return i;
}
return -1;
}
var device_type = navigator.userAgent;//获取userAgent信息
document.write(device_type);//打印到页面
var md = new MobileDetect(device_type);//初始化mobile-detect
var os = md.os();//获取系统
var model = "";
if (os == "iOS") {//ios系统的处理
os = md.os() + md.version("iPhone");
model = md.mobile();
} else if (os == "AndroidOS") {//Android系统的处理
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/"));
}
}
alert(os + "---" + model);//打印系统版本和手机型号
</script>
</html>Nach dem Login kopieren
得到结果：
iphone iOS10.21---iPhone
android AndroidOS6.01---Redmi Note 4X
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
JavaScript实现区块链
iview table render集成switch开关的实例
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Das obige ist der detaillierte Inhalt vonImplementierungscode für JavaScript zum Abrufen des Mobilgerätemodells (JS zum Abrufen des Mobiltelefonmodells und -systems). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
