Heim > Artikel > Web-Frontend > Implementierungscode für JavaScript zum Abrufen des Mobilgerätemodells (JS zum Abrufen des Mobiltelefonmodells und -systems)

Implementierungscode für JavaScript zum Abrufen des Mobilgerätemodells (JS zum Abrufen des Mobiltelefonmodells und -systems)

亚连Original: 2018-05-31 10:33:436929Durchsuche

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(&#39;canvas&#39;),
    gl = canvas.getContext(&#39;experimental-webgl&#39;),
    debugInfo = gl.getExtension(&#39;WEBGL_debug_renderer_info&#39;);

  console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
})();

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(&#39; or &#39;));</script></h1>
  </head>
</html>

Gerät 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(&#39;canvas&#39;);
    }

    return canvas;
  }

  function getGl() {
    if (gl == null) {
      gl = getCanvas().getContext(&#39;experimental-webgl&#39;);
    }

    return gl;
  }

  function getScreenWidth() {
    return Math.max(screen.width, screen.height) * (window.devicePixelRatio || 1);
  }

  function getGlRenderer() {
    if (glRenderer == null) {
      debugInfo = getGl().getExtension(&#39;WEBGL_debug_renderer_info&#39;);
      glRenderer = debugInfo == null ? &#39;unknown&#39; : getGl().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
    }

    return glRenderer;
  }

  function getModels() {
    if (models == null) {
      var device = devices[getGlRenderer()];

      if (device == undefined) {
        models = [&#39;unknown&#39;];
      } else {
        models = device[getScreenWidth()];

        if (models == undefined) {
          models = [&#39;unknown&#39;];
        }
      }
    }

    return models;
  }

  if (window.MobileDevice == undefined) {
    window.MobileDevice = {};
  }

  window.MobileDevice.getGlRenderer = getGlRenderer;
  window.MobileDevice.getModels = getModels;
})();

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 acf723950ed6011b418a8ad82a7f9b7310_2_154bdf357c58b8a65c66d7c19c8e4d114 wie Mac OS a80cef128d8e145f6c8ee3fc2423b6bb10_3_154bdf357c58b8a65c66d7c19c8e4d114 wie Mac OS Mozilla/5.0 (Linux; 0514c41975849410474510505e33af80Android 5.154bdf357c58b8a65c66d7c19c8e4d114; 23b116612d380f011eb8a2f2f43b221dm1 Metal54bdf357c58b8a65c66d7c19c8e4d114 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; 0888031e5554b7d0d086f35893c6564aAndroid 6.0.1494c0df226525cc046cf4930a65bbd6f; 23b116612d380f011eb8a2f2f43b221dSM-A800054bdf357c58b8a65c66d7c19c8e4d114 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; a80cef128d8e145f6c8ee3fc2423b6bbAndroid 6.0.1d6d448110e0324953b5d7bc1e2b276ce; 48c4048c78b9df2185793dba5ce9d7ddRedmi Note 4X54bdf357c58b8a65c66d7c19c8e4d114 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( 
  &#39;Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i&#39; + 
  &#39; Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)&#39; + 
  &#39; Version/4.0 Mobile Safari/534.30&#39;); 
 
// more typically we would instantiate with &#39;window.navigator.userAgent&#39; 
// as user-agent; this string literal is only for better understanding 
 
console.log( md.mobile() );     // &#39;Sony&#39; 
console.log( md.phone() );      // &#39;Sony&#39; 
console.log( md.tablet() );     // null 
console.log( md.userAgent() );    // &#39;Safari&#39; 
console.log( md.os() );       // &#39;AndroidOS&#39; 
console.log( md.is(&#39;iPhone&#39;) );   // false 
console.log( md.is(&#39;bot&#39;) );     // false 
console.log( md.version(&#39;Webkit&#39;) );     // 534.3 
console.log( md.versionStr(&#39;Build&#39;) );    // &#39;4.1.A.0.562&#39; 
console.log( md.match(&#39;playstation|xbox&#39;) ); // false

使用过程中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>

得到结果：

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Methoden zum Einbetten von JS in HTML-DokumenteNächster Artikel：Zusammenfassung der Methoden zum Einbetten von JS in HTML-Dokumente

In Verbindung stehende Artikel

Mehr sehen