客戶端檢測

在日常寫js時，最需要考慮的一個方面就是，用戶使用的瀏覽器是什麼？用戶瀏覽器是否支持某種方法。

1，userAgen檢測

var ua = navigator.userAgent;
//檢測opera 
if ( window.opera ){
    engine.ver = window.opera.version();//版本號
    engine.opera = parseFloat( engine.ver );
    //檢測webkit 
} else if ( /AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
    //檢測khtml 
} else if ( /KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
    //檢測gecko 
} else if ( /rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
    //檢測ie
} else if (/MSIE ([^;]+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
}

方法很複雜，新增了很多代碼量。並且，對於檢測出來的瀏覽器類型，版本號等都需要做不同的處理

2，客戶端特異性檢測

即，針對不同的瀏覽器的差異來檢測。比如兼容性之間的差異。css hack等

3，能力檢測if判斷

例如，原生的xhr新建的時候，需要判斷瀏覽器是否支持xmlhttprequest對象：

if(XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
}else{
    alert("no object XMLHttpRequest");
}

4，媒體查詢

css3新特性。響應式佈局，適合於移動端（多種屏幕大小）。不屬於js.主要是針對不同的設備大小等方面。是展示方面的，不是功能方面。
@media screen and (min-width:100px){}
需要配合

小結

以上方法從 差到好。第三種最常用。前面兩種不推薦使用。第四種屬於css範疇，需要增加的代碼量過多，適合與移動端的設計。