判断用户当前是什么设备,甚至可以侦测出手机型号乃至系统版本。此代码来自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 |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"判断用户当前设备终端型号 – 设备侦测工具"
最新评论