当前位置:首页 > Javascript > 正文内容

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

彭淇3年前 (2017-09-09)Javascript37784

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

SUI Mobile官方提供的zepto.js(CDN),懒人必备

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

源码如下:

$(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提供了一些基本的设备侦测信息可供使用。举例如下

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工具用以方便的进行版本号比较:

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



扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/102.html

分享给朋友:

相关文章

以表单提交前邮箱检测为例解析javascript正则表达式检测

表单检测在登录、注册、订单、留言板等重要部件都必不可少。下面飞翔勿扰就根据表单提交前邮箱的检测为例简单解析一下javascript正则表达式的使用。实例代码非常实用,让诸君先睹为快~...

javascript统计网站运行时间动态输出每秒变化

大家都知道javascript产生时钟的方法,而这里飞翔勿扰要跟大家分享的网站运行时间动态输出就是从时钟产生演变而来。 话不多说,先把干货代码送上: <sc...

为网站添加点击喜庆灯笼特效

为网站添加点击喜庆灯笼特效

为网站添加对联灯笼喜庆特效。特此感谢飞翔勿扰站长提供的代码和方法效果图如下:设置方法如下:代码如下: <div class="container">...

网站优化如何提高页面的加载速度

网站优化如何提高页面的加载速度

加快网页的加载速度,无疑是提高用户体验的一个很好的方法。但是这里我们如何提高网页的加载速度呢?这里是我所理解的和网上搜索到的几点总结。  1. 使用良好的结构 &n...

js实现简单的注册表验证

js实现简单的注册表验证,效果如下: <!DOCTYPE html> <html> <head> <meta charset=&q...

javascript收藏本站和设为首页代码

站长的梦想也许是每个人都能收藏自己的网站,甚至将网站设为首页,这样每个访客都能成为自己的忠实粉丝,也许很难,但是从提供收藏本站和设为首页的按钮做起吧~ 由于只有IE和Firefox才...

评论列表

唯美陌阡
3年前 (2017-09-15)

[code]签到成功!签到时间:2017/9/15 上午10:58:06,每日签到,生活更精彩![/code]

彭淇 回复:
@唯美陌阡:欢迎
3年前 (2017-09-15)
涂涂秀
涂涂秀
3年前 (2017-09-11)

可以

哈贝达斯
哈贝达斯
3年前 (2017-09-11)

长知识了

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。