很是全面的瀏覽器useragent判斷代碼

什麼是User Agent？懂一點網頁製做的人應該都明白。簡單的說，User Agent就是用來識別瀏覽器名稱、版本、引擎以及操做系統等信息的內容。因而乎，User Agent的判斷就成爲識別瀏覽器的關鍵，不單單如此，移動互聯網開發勢頭迅猛，那麼經過User Agent判斷桌面端設備或移動設備就變的很爲重要。固然，經過User Agent也能夠用來改善必定的兼容性，好比判斷獲得用戶用IE6瀏覽器那麼就是用不一樣的代碼。這些，我想許多的WEB開發中已經成爲考慮的第一個問題。javascript

那麼，有沒有一種好的判斷User Agent的代碼呢？網上應該有不少，比較簡單的直接判斷下iOS和Android，而後進入不同的頁面。好比百度地圖就是如此，桌面設備訪問http://map.baidu.com/地址，而移動設備就訪問http://map.baidu.com/mobile/地址，你用桌面設備訪問移動網址則還會自動跳回到桌面地址。這就是經過判斷User Agent作到的效果。html

我沒有去細究百度地圖是如何判斷桌面設備和移動設備的，但我想要找到一個比較全面的User Agent判斷代碼。不知道你們是否知道有一個叫html5test的網站，其中要做用就是判斷你的瀏覽器對HTML5的支持程度，但同時，他還提供了瀏覽器和設備信息。我在桌面端經過Firefox、Chrome、IE、Safari等測試都很正確，在移動設備端，Apple iPod下測試了Safari、Opera mini和UC，除了UC沒法識別外其餘都OK，另外在Nokia E63下也作了測試，默認瀏覽器OK，UC沒法識別。html5

既然HTML5TEST已經作的如此全面，連瀏覽器、引擎、設備類型和設備名稱等都包羅萬象，那就說明在User Agent上的判斷應該是作的很是不錯的，至少，是我現今看到的最好的了。而後又看到HTML5TEST自己是開源的，那就下載下來分析一下吧。看事後，沒有想到，HTML5TEST居然封裝的那麼好，一個JS包含了基本上所有的User Agent判斷，這個js文件，能夠直接瀏覽這裏。java

我把這個JS單獨拿出來，再加上幾句html，作了個瀏覽器測試的頁面，你們能夠經過訪問這個頁面來查看本身的瀏覽器信息、設備信息等，效果請見下圖。地址：http://rovertang.com/labs/useragent/git

我想，經過這一個js，獲得了瀏覽器信息、設備類型和設備名稱，接下來怎麼作就看你本身的了，不過也有一個小小的擔憂：一個大於50K的js文件，對頁面的加載彷佛是有點壓力的。github

順便說一下，發現IE對HTML5的DOCTYPE標籤支持不是很好，有測試不經過的現象。萬惡的IE確實挺讓人惱火的。web

最後推薦一個FireFox的組件吧，我想許多人都用過，就是User Agent Switcher，做用呢就是在FF下假裝成其餘瀏覽器，好比iPhone的瀏覽器，這樣就能夠直接在FF下瀏覽移動網頁進行代碼分析了。chrome

源碼以下：瀏覽器

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>useragent判斷器</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;">
	<script src='useragents.js' type='text/javascript'></script>
	</head>

	<body>
	<script>
	//alert(navigator.userAgent);
	Browsers = new UserAgents(navigator.userAgent);
	var txt = "browserName: " + (Browsers.browser.name ? Browsers.browser.name : '') + '<br />' +
	"browserChannel: " + (Browsers.browser.channel ? Browsers.browser.channel : '') + '<br />' +
	"browserVersion: " + (Browsers.browser.version ? Browsers.browser.version.toString() : '') + '<br />' +
	"browserVersionType: " + (Browsers.browser.version ? Browsers.browser.version.type : '') + '<br />' +
	"browserVersionMajor: " + (Browsers.browser.version ? Browsers.browser.version.major : '') + '<br />' +
	"browserVersionMinor: " + (Browsers.browser.version ? Browsers.browser.version.minor : '') + '<br />' +
	"browserVersionOriginal: " + (Browsers.browser.version ? Browsers.browser.version.original : '') + '<br />' +
	"browserMode: " + (Browsers.browser.mode ? Browsers.browser.mode : '') + '<br />' +
	"engineName: " + (Browsers.engine.name ? Browsers.engine.name : '') + '<br />' +
	"engineVersion: " + (Browsers.engine.version ? Browsers.engine.version.toString() : '') + '<br />' +
	"osName: " + (Browsers.os.name ? Browsers.os.name : '') + '<br />' +
	"osVersion: " + (Browsers.os.version ? Browsers.os.version.toString() : '') + '<br />' +
	"deviceManufacturer: " + (Browsers.device.manufacturer ? Browsers.device.manufacturer : '') + '<br />' +
	"deviceModel: " + (Browsers.device.model ? Browsers.device.model : '') + '<br />' +
	"deviceType: " + (Browsers.device.type ? Browsers.device.type : '') + '<br />' +
	"useragent: " + navigator.userAgent + '<br />' +
	"humanReadable: " + Browsers.toString();
	//alert(txt);
	window.document.write(txt);
	</script>
	<br><br><br><br>
	<a href="http://rovertang.com/blog/archives/555">Read More ... </a><br>
	Powered by <a href="http://www.html5test.com">html5test</a><br>
	Modified by
	<a href="http://rovertang.com">RoverTang</a>
	</body>
	</html>

【原文地址：http://www.cnblogs.com/Tangf/archive/2012/03/25/2416605.html】app