客戶端能力檢測

瀏覽器提供商雖然在實現公共接口方面投入了不少精力，但結果仍然是每一種瀏覽器都有各自
的長處，也都有各自的缺點。即便是那些跨平臺的瀏覽器，雖然從技術上看版本相同，也照
樣存在不一致性問題。面對廣泛存在的不一致性問題，開發人員要麼採起遷就各方的「最小公分母」策
略，要麼（也是更常見的）就得利用各類客戶端檢測方法，來突破或者規避種種侷限性。

能力檢測

能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。採用這種方式沒必要顧及特定的瀏覽器如何如何，只要肯定瀏覽器支持特定的能力，就能夠給出解決方案。

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 retieve element');
}
}

這裏經過能力檢測獲取元素,首先檢測document對象是否有getElementById方法,而後檢測是否有all對象,若是上述都沒檢測到則拋出錯誤.
能力檢測有兩點須要注意

1. 優先檢測達到目的最經常使用的特性

2. 檢測實際用到的屬性

固然,更靠譜的檢測時使用typeof來檢測其特性的類型,而非僅僅經過類型轉換來判斷是否有這個屬性.

怪癖檢測

怪癖檢測（quirks detection）的目標是識別瀏覽器的特殊行爲。但與能力檢測確認瀏覽器支持什麼能力不一樣，怪癖檢測是想要知道瀏覽器存在什麼缺陷（「怪癖」也就是bug）
例如，IE8 及更早版本中存在一個bug，即若是某個實例屬性與[[Enumerable]]標記爲false 的某個原型屬性同名，那麼該實例屬性將不會出如今fon-in 循環當中。可使用以下代碼來檢測這種「怪癖」。

var hasDontEnumQuirk = function (){
    var o = {toString:function(){}},prop;
    for(prop in o){
        if(prop == 'toString'){
            return false;
        }
        return true;
    }
}

用戶代理檢測

用戶代理檢測通常被看成一種萬不得已才用的作法，其優先級排在能力檢測和（或）怪癖檢測以後,經過如下代碼檢測客戶端引擎,瀏覽器,系統

var client = function () {
//呈現引擎
    var engine = {
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,
//完整的版本號
        ver: null
    };
//瀏覽器
    var browser = {
//主要瀏覽器
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,
//具體的版本號
        ver: null
    };
//平臺、設備和操做系統
    var system = {
        win: false,
        mac: false,
        x11: false,
//移動設備
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,
//遊戲系統
        wii: false,
        ps: false
    };
//檢測呈現引擎和瀏覽器
    var ua = navigator.userAgent;
    if (window.opera) {
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)) {
        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;
        }
    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);
//肯定是否是Firefox
        if (/Firefox\/(\S+)/.test(ua)) {
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.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;
                    case "6.1":
                        system.win = "7";
                        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
    };
}();