DIV CSS 佈局教程網

定義

　　用戶代理字符串:navigator.userAgent

　　HTTP規范明確規定，浏覽器應該發送簡短的用戶代理字符串，指明浏覽器的名稱和版本號。但現實中卻沒有這麼簡單。

發展歷史

【1】1993年美國NCSA國家超級計算機中心發布了世界上第一款web浏覽器Mosaic，該浏覽器的用戶代理字符串為Mosaic/0.9

【2】Netscape公司進入浏覽器開發領域，將自己產品的代號定名了Mozilla(Mosaic Killer)的簡寫，用戶代理字符串格式為Mozilla/版本號 [語言] (平台；加密類型)

【3】IE發布的第一款贏得用戶廣泛認可的web浏覽器IE3，當時Netscap已經占據了絕對市場份額，為了讓服務器能夠檢測到IE，IE將用戶代理字符串修改成兼容Netscape的形式:Mozilla/2.0(compatible;MSIE版本號；操作系統)

【4】各浏覽器陸續出現，用戶代理字符串的顯示格式也越來越類似…… 

測試工具

　利用各桌面浏覽器調試工具，主要是IE調試工具及chrome的emulation手機調試工具

桌面端測試結果

【1】IE

　　[1.1]IE3

　　　　Mozilla/2.0 (compatible; MSIE3.02; windows 95)

　　[1.2]IE6

　　　　Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

　　[1.3]IE7

　　　　Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

　　[1.4]IE8

　　　　Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

　　[1.5]IE9

　　　　Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

　　[1.6]IE10

　　　　Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

　　[1.7]IE11

　　　　Mozilla/5.0 (MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET

CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; GWX:QUALIFIED; rv:11.0) like Gecko

【2】chrome

　　Mozilla/5.0 (Windows NT 6.1; WOW64)G AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36

【3】safari

　　Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

【4】firefox

　　Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0

【5】opera

　　Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25

移動端測試結果

【1】ipad

　　Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

【2】iphone

　　Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4

【3】android

　　Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36

識別浏覽器內核

　　常見的內核有Trident、Gecko和Webkit

　　　　[注意]因為Trident和Webkit的用戶代理字符串中可能會出現 like Gecko的字眼，所以最後再測Gecko

function whichEngine(){
 var ua = navigator.userAgent;
 //Trident內核
 if(/Trident/.test(ua)){
  return "Trident";
 }
 //Webkit內核
 if(/WebKit/.test(ua)){
  return "WebKit";
 }  
 //Gecko內核
 if(/Gecko/.test(ua)){
  return "Gecko";
 }
}
console.log(whichEngine());//IE11下顯示"Trident"

識別浏覽器版本

【1】IE

　　IE3-IE10都可以通過MSIE的版本號來判斷，因為有的IE11並不出現MSIE字符，且safari中也有rv字段，所以IE11需要通過rv後的版本號和Trident來配合判斷

function isIE(){
 var ua = navigator.userAgent;
 //檢測Trident引擎，IE8+
 if(/Trident/.test(ua)){
  //IE11+
  if(/rv:(\d+)/.test(ua)){
   return RegExp["$1"];
  } 
  //IE8-IE10 
  if(/MSIE (\d+)/.test(ua)){
   return RegExp["$1"];
  }  
 }
 //檢測IE標識，IE7-
 if(/MSIE (\d+)/.test(ua)){
  return RegExp["$1"];
 } 
}
console.log(isIE());//只有IE會返回版本號，其他浏覽器都返回undefined

【2】chrome

function isChrome(){
 var ua = navigator.userAgent;
 //先排除opera,因為opera只是在chrome的userAgent後加入了自己的標識
 if(!/OPR/.test(ua)){
  if(/Chrome\/(\S+)/.test(ua)){
   return RegExp["$1"];
  } 
 } 
}
console.log(isChrome());//只有Chrome會返回版本號45.0.2454.93，其他浏覽器都返回undefined

【3】safari

function isSafari(){
 var ua = navigator.userAgent;
 //先排除opera
 if(!/OPR/.test(ua)){
  //檢測出chrome和safari浏覽器
  if(/Safari/.test(ua)){
   //檢測出safari
   if(/Version\/(\S+)/.test(ua)){
    return RegExp["$1"];
   }  
  }
 } 
}
console.log(isSafari());//只有safari會返回版本號5.1.7，其他浏覽器都返回undefined

【4】firefox

function isFireFox(){
 if(/Firefox\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isFireFox());//只有firefox會返回版本號40.0，其他浏覽器都返回undefined

【5】opera

function isOpera(){
 if(/OPR\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isOpera());//只有opera會返回版本號32.0.1948.25，其他浏覽器都返回undefined 

識別操作系統

　　使用navigator.platform檢測操作系統更加簡單，因為其可能包括的值為“Win32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等，且在不同浏覽器中是一致的。

　　而通過navigator.userAgent可以來得到window系統的詳細信息。

windows版本                        ->             內核版本
Windows XP                        ->             5.1
Windows Vista                     ->             6.0
Windows 7                         ->             6.1
Windows 8                         ->             6.2
Windows 8.1                       ->             6.3
Windows 10技術預覽版             　 ->             6.4
Windows 10(Build 9880+)           ->             10

function whichSyStem(){
 var ua = navigator.userAgent;
 var pf = navigator.platform;
 if(/Mac/.test(pf)){
  return "Mac";
 }
 if(/X11/.test(pf) || /Linux/.test(pf)){
  return "Linux";
 }
 if(/Win/.test(pf)){
  if(/Windows NT (\d+\.\d+)/.test(ua)){
   switch(RegExp["$1"]){
    case "5.0":
     return "Windows 2000";
    case "5.1":
     return "Windows XP";
    case "6.0":
     return "Windows Vista";
    case "6.1":
     return "Windows 7";
    case "6.2":
     return "Windows 8";
    case "6.3":
     return "Windows 8.1";
    case "6.4":
    case "10":
     return "Windows 10";     
   }
  }
 }
}
console.log(whichSyStem())//Windows 7

識別移動端設備

function whichMobile(){
 var ua = navigator.userAgent;
 if(/iPhone OS (\d+_\d+)/.test(ua)){
  return 'iPhone Mac' + RegExp.$1.replace("_",".");
 }
 if(/iPad.+OS (\d+_\d+)/.test(ua)){
  return 'iPad Mac' + RegExp.$1.replace("_",".")
 }
 if(/Android (\d+\.\d+)/.test(ua)){
  return 'Android' + RegExp["$1"];
 }
}
console.log(whichMobile())//Android 5.1