Code d'implémentation pour JavaScript pour obtenir le modèle de l'appareil mobile (JS pour obtenir le modèle et le système du téléphone mobile)-js tutoriel-php.cn

Cet article présente principalement le code d'implémentation de JavaScript pour obtenir le modèle de l'appareil mobile. Les amis qui en ont besoin peuvent s'y référer

Nous identifions généralement le périphérique d'accès de l'utilisateur dans le navigateur via le champ User Agent, mais grâce à lui, nous ne pouvons obtenir que des informations générales, comme si vous utilisez Mac ou Windows et si vous utilisez iPhone ou iPad. Si je veux savoir quelle génération d'iPhone vous utilisez, cette méthode ne fonctionnera pas. Il y a quelque temps, j'ai eu ce besoin d'identifier le modèle spécifique du client mobile (principalement des appareils iOS), j'ai donc réfléchi à l'implémentation. de ce problème.

Tout d’abord, comme tout le monde, j’ai pensé à l’UA, mais il s’avère que cette route ne fonctionnera pas. Juste au moment où je m'ennuyais en jouant avec l'API du navigateur une par une, soudain, un certain morceau de code dans un article me l'a rappelé. Cet article explique comment obtenir des informations sur le périphérique graphique via js. Étant donné que HTML5 prend en charge le canevas, le modèle du périphérique graphique, tel que le modèle de la carte graphique, peut être obtenu via l'API.

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

Copier après la connexion

Exécutez ce code pour obtenir le modèle de carte graphique. Si vous l'exécutez sur un appareil iOS, vous obtiendrez quelque chose comme des informations sur la classe GPU Apple A9. . Et nous savons que le modèle GPU de chaque génération d'appareils iOS est différent. Par exemple, l'iPhone 6 est A8 et l'iPhone 6s est A9. En voyant cela, vous devriez probablement connaître mon idée, qui est d'identifier le modèle de l'appareil en identifiant le modèle du GPU.

Cependant, il y a un petit défaut. Certains appareils sont de la même génération, c'est-à-dire que les modèles de GPU sont exactement les mêmes, comme l'iPhone 6s, l'iPhone 6s Plus et l'iPhone SE. Ils utilisent tous le GPU Apple A9, comment les distinguer ? Vous constaterez que la plus grande différence entre eux n’est pas la résolution ? Grâce à JavaScript, nous pouvons facilement obtenir la résolution de l'écran, de sorte qu'en combinant les deux méthodes, nous puissions obtenir le modèle précis de l'appareil.

Voici un exemple d'URL, vous pouvez y accéder avec votre téléphone portable
https://joyqi.github.io/mobile-device-js/example.html

Je mets tous mes codes Sur GitHub
https://github.com/joyqi/mobile-device-js

Cette réflexion m'a donné une certaine inspiration pour résoudre des problèmes Lorsque nous réfléchissons à des solutions, nous partons de côté. Il y aura peut-être de nouvelles découvertes. Par exemple, notre code ne peut actuellement pas identifier l'iPad Air et l'iPad mini de la même génération car ils ont le même GPU et la même résolution. Cependant, il existe de nombreuses solutions pour poursuivre cette idée. Par exemple, vous pouvez étudier ces deux nombres de microphones. et haut-parleurs de l'appareil, et ce numéro peut également être obtenu via JS:P

Code de test complet

<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>

Copier après la connexion

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

Copier après la connexion

JS obtient le modèle et le système du téléphone

Je souhaite obtenir des informations sur le téléphone via js Pour les paramètres de base, nous devons utiliser navigator.userAgent, grâce auquel nous pouvons obtenir des informations de base sur le navigateur. Si nous voulons voir le contenu de navigator.userAgent sur la page, nous pouvons utiliser document.write(navigator.userAgent); pour l'imprimer sur la page, afin que nous puissions voir le contenu spécifique plus clairement.

1. Voici le contenu userAgent de certains téléphones mobiles que j'ai imprimé :

1. iphone6 plus
Mozilla/5.0 (iPhone ; CPU iPhone OS 10_2_1 comme Mac OS 10_3_1 comme Mac OS Mozilla/5.0 (Linux; Android 5.1; m1 metal ) 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, comme 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, comme Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/ 537.36

De ce qui précède nous pouvons voir que le champ iPhone contient le champ iPhone et que le champ version du système est marqué en rouge ci-dessus. 2, 3 et 4 sont le contenu userAgent de plusieurs téléphones mobiles Android. Si vous observez attentivement, il n'est pas difficile de constater qu'Android 5.1 et ainsi de suite sont les versions du système. Le bleu est le modèle de téléphone. Quant aux autres contenus, y compris la version du navigateur, etc., il n'y aura aucune explication ici. Si vous souhaitez connaître la signification spécifique et la source de ce contenu userAgent, vous pouvez vous référer à l'adresse suivante pour une explication détaillée :

Pourquoi les userAgents de tous les navigateurs sont-ils fournis avec Mozilla

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

Copier après la connexion

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

Copier après la connexion

得到结果：

iphone iOS10.21---iPhone

android AndroidOS6.01---Redmi Note 4X

上面是我整理给大家的，希望今后会对大家有帮助。

JavaScript实现区块链

iview table render集成switch开关的实例

解决Vue.js 2.0 有时双向绑定img src属性失败的问题

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!