摘要:
對于前端開發我們最重要的工作就是兼容性,系統的兼容性,瀏覽器的兼容性等等。今天分享一個我在項目中封裝的判斷操作系統與瀏覽器的方法。
操作系統:
var os = (function() { var UserAgent = navigator.userAgent.toLowerCase(); return { isIpad : /ipad/.test(UserAgent), isIphone : /iphone os/.test(UserAgent), isAndroid : /android/.test(UserAgent), isWindowsCe : /windows ce/.test(UserAgent), isWindowsMobile : /windows mobile/.test(UserAgent), isWin2K : /windows nt 5.0/.test(UserAgent), isXP : /windows nt 5.1/.test(UserAgent), isVista : /windows nt 6.0/.test(UserAgent), isWin7 : /windows nt 6.1/.test(UserAgent), isWin8 : /windows nt 6.2/.test(UserAgent), isWin81 : /windows nt 6.3/.test(UserAgent) };}());
如果要判斷系統是否是iPad,只需要判斷if(os.isIpad) {}.
瀏覽器:
var bw = (function() { var UserAgent = navigator.userAgent.toLowerCase(); return { isUc : /ucweb/.test(UserAgent), // UC瀏覽器 isChrome : /chrome/.test(UserAgent.substr(-33,6)), // Chrome瀏覽器 isFirefox : /firefox/.test(UserAgent), // 火狐瀏覽器 isOpera : /opera/.test(UserAgent), // Opera瀏覽器 isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire瀏覽器 is360 : /360se/.test(UserAgent), // 360瀏覽器 isBaidu : /bidubrowser/.test(UserAgent), // 百度瀏覽器 isSougou : /metasr/.test(UserAgent), // 搜狗瀏覽器 isIE6 : /msie 6.0/.test(UserAgent), // IE6 isIE7 : /msie 7.0/.test(UserAgent), // IE7 isIE8 : /msie 8.0/.test(UserAgent), // IE8 isIE9 : /msie 9.0/.test(UserAgent), // IE9 isIE10 : /msie 10.0/.test(UserAgent), // IE10 isIE11 : /msie 11.0/.test(UserAgent), // IE11 isLB : /lbbrowser/.test(UserAgent), // 獵豹瀏覽器 isWX : /micromessenger/.test(UserAgent), // 微信內置瀏覽器 isQQ : /qqbrowser/.test(UserAgent) // QQ瀏覽器 };}());
]
小結:
瀏覽器都是本人親自測試的,可能會有問題的是chrome瀏覽器,因為大部分瀏覽器都是使用WebKit內核,所以我就把chrome的navigator截取出來區分。如果以后chrome的navigator的信息位置或者chrome之后的長度發生改變就容易出現問題,但目前來看是可以的。
現在因為手機UC瀏覽器經常屏蔽百度的廣告,但對google廣告不屏蔽,我們可以加入判斷是否為UC瀏覽器,不是就顯示百度廣告,是就顯示google的廣告
if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc瀏覽器");}else{//不是uc瀏覽器執行的操作}
其實具體的瀏覽器的一些特殊的操作可以通過
JS獲取瀏覽器信息
瀏覽器代碼名稱:navigator.appCodeName
瀏覽器名稱:navigator.appName
瀏覽器版本號:navigator.appVersion
對Java的支持:navigator.javaEnabled()
MIME類型(數組):navigator.mimeTypes
系統平臺:navigator.platform
插件(數組):navigator.plugins
用戶代理:navigator.userAgent
新聞熱點
疑難解答