• Jquery判断是不是移动设备浏览


    首先,只判断是否是用移动设备浏览的:

    // Mobile 这里是只有不再移动设备上访问时,才给相应元素加上 mouseenter  和  mouseleave  事件。

    if (!navigator.userAgent.match(/mobile/i)) {
    
        $('.nav-dots span').mouseenter(function() {
            $(this).css('background-color', 'rgba(0, 0, 0, 0.2) !important');
        });
        
        $('.nav-dots span').mouseleave(function() {
            $(this).css('background-color', 'rgba(255, 255, 255, 0.2) !important');
        });
        
    }
    var browser = {
        versions: function() {
            var u = navigator.userAgent,
                app = navigator.appVersion;
            return {
                //移动终端浏览器版本信息 
                trident: u.indexOf('Trident') > -1, //IE内核 
                presto: u.indexOf('Presto') > -1, //opera内核 
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 
                mobile: !! u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 
                ios: !! u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 
                iPad: u.indexOf('iPad') > -1, //是否iPad 
                webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部 
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    
    if (browser.versions.mobile || browser.versions.ios || browser.versions.android ||
        browser.versions.iPhone || browser.versions.iPad) {
        window.location = "http://m.baidu.com";
    }




    ---------------------------------------------------------------------------------------------------------

    第二,需要得到详细的移动设备的类型:

    $(document).ready(function() {
        var isMobile = {
            Android: function() {
                return navigator.userAgent.match(/Android/i) ? true : false;
            },
            BlackBerry: function() {
                return navigator.userAgent.match(/BlackBerry/i) ? true : false;
            },
            iOS: function() {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
            },
            Windows: function() {
                return navigator.userAgent.match(/IEMobile/i) ? true : false;
            },
            any: function() {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
            }
        };
        if (isMobile.any()) {
            $('.main_header').hide();
        }
    });

    第三,js判断是否为pc端或移动端

    function IsPC()  
    {  
       var userAgentInfo = navigator.userAgent;  
       var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
       var flag = true;  
       for (var v = 0; v < Agents.length; v++) {  
           if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
       }  
       return flag;  
    } 
  • 相关阅读:
    《大型网站技术架构:核心原理与案例分析》阅读笔记三
    《大型网站技术架构:核心原理与案例分析》阅读笔记二
    《大型网站技术架构:核心原理与案例分析》阅读笔记一
    《用户故事与敏捷方法》阅读笔记三
    软件需求与分析课堂讨论一
    信息领域热词分析
    datax的第一次使用
    质量属性2——质量六大属性之可用性在代码端的实现
    质量属性1——《淘宝网》
    阅读笔记之——《架构漫谈》四
  • 原文地址:https://www.cnblogs.com/bigdesign/p/4549372.html
Copyright © 2020-2023  润新知