判断用户当前设备终端型号

判断用户当前设备终端型号 – 设备侦测工具

本文主要是介绍判断用户当前设备终端型号 – 设备侦测工具，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

判断用户当前是什么设备，甚至可以侦测出手机型号乃至系统版本。此代码来自SUI Mobile源码，我只是搬运工，需要借助zepto.js

SUI Mobile官方提供的zepto.js（CDN），懒人必备

1	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>

源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

$(function(){
  (function ($) {
  "use strict";
  var device = {};
  var ua = navigator.userAgent;

  var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
  var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
  var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
  var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);

device.ios = device.android = device.iphone = device.ipad = device.androidChrome = false;

  // Android
  if (android) {
device.os = 'android';
device.osVersion = android[2];
device.android = true;
device.androidChrome = ua.toLowerCase().indexOf('chrome') >= 0;
  }
  if (ipad || iphone || ipod) {
device.os = 'ios';
device.ios = true;
  }
  // iOS
  if (iphone && !ipod) {
device.osVersion = iphone[2].replace(/_/g, '.');
device.iphone = true;
  }
  if (ipad) {
device.osVersion = ipad[2].replace(/_/g, '.');
device.ipad = true;
  }
  if (ipod) {
device.osVersion = ipod[3] ? ipod[3].replace(/_/g, '.') : null;
device.iphone = true;
  }
  // iOS 8+ changed UA
  if (device.ios && device.osVersion && ua.indexOf('Version/') >= 0) {
  if (device.osVersion.split('.')[0] === '10') {
device.osVersion = ua.toLowerCase().split('version/')[1].split(' ')[0];
  }
  }

  // Webview
device.webView = (iphone || ipad || ipod) && ua.match(/.*AppleWebKit(?!.*Safari)/i);

  // Minimal UI
  if (device.os && device.os === 'ios') {
  var osVersionArr = device.osVersion.split('.');
device.minimalUi = !device.webView &&
  (ipod || iphone) &&
  (osVersionArr[0] * 1 === 7 ? osVersionArr[1] * 1 >= 1 : osVersionArr[0] * 1 > 7) &&
$('meta[name="viewport"]').length > 0 && $('meta[name="viewport"]').attr('content').indexOf('minimal-ui') >= 0;
  }

  // Check for status bar and fullscreen app mode
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
device.statusBar = false;
  if (device.webView && (windowWidth * windowHeight === screen.width * screen.height)) {
device.statusBar = true;
  }
  else {
device.statusBar = false;
  }

  // Classes
  var classNames = [];

  // Pixel Ratio
device.pixelRatio = window.devicePixelRatio || 1;
classNames.push('pixel-ratio-' + Math.floor(device.pixelRatio));
  if (device.pixelRatio >= 2) {
classNames.push('retina');
  }

  // OS classes
  if (device.os) {
classNames.push(device.os, device.os + '-' + device.osVersion.split('.')[0], device.os + '-' + device.osVersion.replace(/\./g, '-'));
  if (device.os === 'ios') {
  var major = parseInt(device.osVersion.split('.')[0], 10);
  for (var i = major - 1; i >= 6; i--) {
classNames.push('ios-gt-' + i);
  }
  }

  }
  // Status bar classes
  if (device.statusBar) {
classNames.push('with-statusbar-overlay');
  }
  else {
$('html').removeClass('with-statusbar-overlay');
  }

  // Add html classes
  if (classNames.length > 0) $('html').addClass(classNames.join(' '));

  // keng..
device.isWeixin = /MicroMessenger/i.test(ua);

$.device = device;
})(Zepto);

$.device提供了一些基本的设备侦测信息可供使用。举例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

console.log($.device)
// --------
{
android: true
androidChrome: false
ios: false
ipad: false
iphone: false
isWeixin: false
os: "android"
osVersion: "4.4.1"
pixelRatio: 3
statusBar: false
webView: null
}

同时提供$.compareVersion工具用以方便的进行版本号比较：

1
2
3
4
5
6
7

// arg1 > arg2, return 1; arg1 == arg2, return 0; arg1 < arg2, return -1
$.compareVersion('8.0', '7.1.1')
// return 1
$.compareVersion('4.2', $.device.osVersion)
// return -1
$.compareVersion('5.0', '5.0')
// return 0