recherche

Maison  >  Article  >  interface Web  >  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)

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)

亚连
亚连original
2018-05-31 10:33:436923parcourir

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

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

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>

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

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 20e3252da5679c9b8b3d9df479e1f8ec10_2_154bdf357c58b8a65c66d7c19c8e4d114 comme Mac OS a80cef128d8e145f6c8ee3fc2423b6bb10_3_154bdf357c58b8a65c66d7c19c8e4d114 comme Mac OS Mozilla/5.0 (Linux; 0514c41975849410474510505e33af80Android 5.154bdf357c58b8a65c66d7c19c8e4d114; 23b116612d380f011eb8a2f2f43b221dm1 metal54bdf357c58b8a65c66d7c19c8e4d114 ) 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, comme 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, 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

使用过程中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属性失败的问题

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé des méthodes d'intégration de JS dans les documents HTMLArticle suivant：Résumé des méthodes d'intégration de JS dans les documents HTML

Articles Liés

Voir plus