js--客戶端檢測

客戶端檢測–客戶端檢測的三種方法：能力檢測，怪癖檢測，用戶代理檢測。

瀏覽器普遍存在的不一致性問題，用各種客戶端檢測方法，來突破或者規避種種侷限性。但是，只要能找到更通用的方法，就應該採用。不到萬不得已，不要使用客戶端檢測。

能力檢測–人們廣泛接受的客戶端檢測形式就是能力檢測

不是識別特定的瀏覽器，是識別瀏覽器的能力。

1.先檢測達成目的最常用的特性，可以保證代碼最優 2.測試實際要用到的特性，而不是測試這個用那個

// 基本模式
if (object.propertyInQuestion) {
    // 使用object.propertyInQuestion
}
// IE5.0前不支持document.getElementById()
function getElement(id) {
    if(document.getElementById) {
        return document.getElementById(id);
    } else if(document.all) {
        return document.all[id];
    } else {
        throw new Error("No way to retrieve element!");
    }
}

怪癖檢測

怪癖檢測是識別瀏覽器的特殊行爲，也就是不是看瀏覽器的能力而是看瀏覽器存在的缺陷。

用戶代理檢測

用戶代理檢測通過檢測用戶代理字符串來確定實際使用的瀏覽器。這個字符串可以通過navigator.userAgent來訪問

引擎和瀏覽器考慮順序：opera–webkit(chrome和safari)–khtml–gecko(firefox)–ie

var client = function(){  

    var engine = {  

        //呈現引擎  
        ie : 0,  
        gecko : 0,  
        webkit : 0,  
        khtml : 0,  
        opera : 0,  

        //完整的版本號
        ver : null  
    }; 
 
    //瀏覽器  
    var browser = {  

        //主要瀏覽器  
        ie : 0,  
        firefox : 0,  
        konq : 0,  
        opera : 0,  
        chrome : 0,  
        safari : 0,  

        //具體的版本號  
        ver : null  
    };  

    //平臺、設備和操作系統
    var system = {  
        win : false,  
        mac : false,  
        x11 : false,  //unix系統

        //移動設備  
        iphone : false,  
        ipod : false,  
        nokiaN  : false,  
        winMobile : false,  
        macMobile : false,  

        //遊戲系統  
        wii : false,  
        ps　:false  
    };  
      
      
    //檢測呈現引擎和瀏覽器  
    var ua  = navigator.userAgent; 

    //第一位檢測到的是opera，opera的用戶代理字符串不會將自己標識爲opera，所以優先考慮opera
    if(window.opera){  
        engine.ver = browser.ver = window.opera.version();  
        engine.opera = browser.opera = parseFloat(engine.ver);  
    }
    //第二位考慮的引擎是webkit，因爲webkit的用戶代理字符串中包含Gecko和KHTML字符串
    else if(/AppleWebKit\/(\S+)/.test(ua)){  
        //RegExp["$1"]是第一個子匹配
        engine.ver = RegExp["$1"];  
        engine.webkit = parseFloat(engine.ver);  

        //確定是chrome還是safari
        if(/Chrome\/(\S+)/.test(ua)){  
            browser.ver = RegExp["$1"];  
            browser.chrome = parseFloat(browser.ver);  
        }else if(/Version\/(\S+)/.test(ua)){  
            browser.ver = RegExp["$1"];  
            browser.safari = parseFloat(browser.ver);  
        }else{  
            var safariVersion = 1;  
            if(engine.webkit < 100){  
                safariVersion = 1;  
            }else if(engine.webkit < 312){  
                safariVersion = 1.2;  
            }else if(engine.webkit < 412){  
                safariVersion = 1.3;  
            }else{  
                safariVersion = 2;  
            }  
            browser.safari = browser.ver = safariVersion;  
        }  
    }

    //第三位考慮的是KHTML，因爲ktml的用戶代理字符串中也包含“Gecko”
    else if(/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){  
        engine.ver = browser.ver = RegExp["$1"];  
        engine.khtml = parseFloat(engine.ver);  
    }

    //第四位考慮的是Gecko，([^\)]+)這個是表示是除了)開頭的其他字符
    else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){  
        engine.ver = browser.ver = RegExp["$1"];  
        engine.gecko = parseFloat(engine.ver);  
          
        //確定是不是Firefox，檢測firefox也是先找到firefox這個關鍵字
        if(/Firefox\/(\S+)/.test(ua)){  
            browser.ver = RegExp["$1"];  
            browser.firefox = parseFloat(browser.ver);  
        }  
    }

    //第五位考慮的是ie
    else if(/MSIE ([^;]+)/.test(ua)){  
        engine.ver = browser.ver = RegExp["$1"];  
        engine.ie = browser.ie = parseFloat(browser.ver);  
    }  

    //檢測瀏覽器
    browser.ie = engine.ie;  
    browser.opera = engine.opera;  
      
    //檢測平臺        
    var p = navigator.platform;  
    system.win = p.indexOf("Win") == 0;  
    system.mac = p.indexOf("Mac") == 0;  
    system.x11 = (p == "x11") || (p.indexOf("Linux") == 0);  
      
    //檢測windows操作系統
    if(system.win){  
        if(/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){  
            if(RegExp["$1"] == "NT"){  
                switch(RegExp["$2"]){  
                    case "5.0" :   
                        system.win = "2000";  
                        break;  
                    case "5.1" :  
                        system.win = "XP";  
                        break;  
                    case "6.0" :   
                        system.win = "Vista";  
                        break;  
                    default :  
                        system.win = "NT";  
                        break;                            
                }  
            }else if(RegExp["$1"] == "9x"){  
                system.win = "ME";  
            }else{  
                system.win = RegExp["$1"];  
            }  
        }  
    }  

    //移動設備
    system.iphone = ua.indexOf("iPhone") > -1;  
    system.ipod = ua.indexOf("iPod") > -1;  
    system.ipad = ua.indexOf("iPad") > -1;  
    system.nokiaN = ua.indexOf("nokiaN") > -1;  

    //windows mobile
    if(system.win == "CE") {
        system.winMobile = system.win;
    } else if (system.win == "Ph") {
        if(/Windows Phone OS (\d+.\d+)/.test(ua)) {
            ;
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }

    //檢測ios版本
    if (system.mac && ua.indexOf("Mobile") > -1) {
        if(/CPU (?:iphone)?OS (\d+_\d+)/.test(ua)) {
            system.ios = parseFloat(RegExp.$1.replace("_","."));
        } else {
            system.ios = 2;//不能真正檢測出來，所以只能猜測
        }
    }

    //檢測Android版本
    if(/Android (\d+\.\d+)/.test(ua)) {
        system.android = parseFloat(RegExp.$1);
    }

    //遊戲系統
    system.wii = ua.indexOf("Wii") > -1;  
    system.ps = /playstation/i.test(ua);  

    //返回這些對象    
    return {  
        engine : engine,  
        browser : browser,  
        system : system  
    };  
}();