js canvas实现雷达扫描源码-JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)

115资源网 8分钟前网站源码浏览：1 0

我们通常在浏览器中使用 User Agent 字段来识别用户的访问设备，但通过它我们只能得到一个大概的信息，比如你使用的是 Mac 还是 Windows，你使用的是 iPhone 还是 iPad。如果我想知道你用的是哪代iPhone，这个方法就行不通了。前段时间，正好有这个需要识别移动客户端（主要是iOS设备）具体型号的需求，所以就思考了这个问题的实现。

首先和大家一样，我想到了UA，但事实证明这条路是行不通的。正当我无聊地去一一摆弄浏览器的API时，突然一篇文章中的某段代码提醒了我。本文讲的是如何通过js获取图形设备信息。由于HTML5支持canvas，因此可以通过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));
})();

运行此代码以获取显卡型号。如果你在iOS设备上运行它，你将获得Apple A9 GPU等信息。而且我们知道，每一代iOS设备的GPU模型都是不同的。例如，iPhone 6 为 A8，iPhone 6s 为 A9。看到这里，你大概应该知道我的想法了js canvas实现雷达扫描源码，就是通过识别GPU型号来识别设备型号。

然而，有一个小缺陷。有些设备是同一代的，即GPU型号完全相同，例如iPhone 6s、iPhone 6s Plus、iPhone SE。它们都使用Apple A9 GPU，如何区分？你会发现它们最大的区别不在于分辨率？通过JavaScript，我们可以轻松获取屏幕分辨率，这样结合两种方法，我们就可以获取设备的准确型号。

这是您可以在手机上访问的示例 URL

我的代码全部在GitHub上

这个想法给了我解决问题的一些启发。当我们思考解决方案的时候，我们可能会从侧面入手，有新的发现。例如，我们的代码目前无法识别同一代的iPad Air和iPad mini，因为它们具有相同的GPU和分辨率。然而，有很多解决方案可以延续这个想法。例如，你可以研究这两个设备的麦克风和扬声器的数量，这个数量也可以通过 JS:P 获得

完整的测试代码


  
    Mobile Device Example
    
  
  
    GPU: document.write(MobileDevice.getGlRenderer());
    Device Models: document.write(MobileDevice.getModels().join(' or '));

设备.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('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;
})();

JS获取手机型号和系统

如果想通过js获取手机的一些基本参数，就需要使用navigator.userAgent，通过它我们可以获取浏览器的一些基本信息。如果我们想在页面上看到navigator.userAgent的内容，可以使用document.write(navigator.userAgent); 打印到页面上，这样我们就可以更清楚的看到具体的内容。

1、以下是我打印的一些手机中的userAgent内容：

1.iphone6+

Mozilla/5.0（iPhone；CPU iPhone OS 10_2_1，如 Mac OS X）AppleWebKit/602.4.6（KHTML，如 Gecko）Mobile/14D27

iphone7加

Mozilla/5.0（iPhone；CPU iPhone OS 10_3_1，如 Mac OS X）AppleWebKit/603.1.30（KHTML，如 Gecko）Mobile/14E304

2、魅族

Mozilla/5.0（Linux；Android 5.1；m1 metal Build/LMY47I）AppleWebKit/537.36（KHTML，如 Gecko）版本/4.0 Chrome/40.0.2214.127 Mobile Safari/537.36

3、三星

Mozilla/5.0（Linux；Android 6.0.1；SM-A8000 Build/MMB29M；wv）AppleWebKit/537.36（KHTML，如 Gecko）版本/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36

4、小米

Mozilla/5.0（Linux；Android 6.0.1；Redmi Note 4X Build/MMB29M；wv）AppleWebKit/537.36（KHTML，如 Gecko）版本/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36

从上面我们可以看到iPhone字段包含了iPhone字段，系统版本字段上面用红色标注了。 2、3、4是几款Android手机的userAgent内容。如果仔细观察的话js canvas实现雷达扫描源码，不难发现Android 5.1等都是系统版本。蓝色的是手机型号。至于其他内容，包括浏览器版本等，这里不再解释。如果你想了解这个userAgent内容的具体含义和来源，可以参考以下地址进行详细解释：

为什么所有浏览器都将 Mozilla 作为其 userAgent？

2、网上查了下有没有现成的js可以直接实现这个功能，找到了mobile-detect.js。基本上我们就可以实现我们需要的参数了，下载地址：

文档地址：

指示：

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

使用过程中ios没有任何问题。你可以得到你想要的一切，但并不是所有的东西都能在 Android 上获得。所以Android被单独对待。我发现Android手机型号后面有一段Build/....所以我做了一个单独的过程来获取Android手机型号。下面是具体代码：

 
 
 
 
 
JS获取手机型号和系统 
 
 
 
 
 
 
  //判断数组中是否包含某字符串 
  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);//打印系统版本和手机型号

得到了答案：

iPhone iOS10.21---iPhone

安卓AndroidOS6.01---红米Note 4X

GPU: document.write(MobileDevice.getGlRenderer());

Device Models: document.write(MobileDevice.getModels().join(' or '));

相关文章