summary:
Our most important job for front-end development is compatibility, system compatibility, browser compatibility, etc. Today I will share a method for judging the operating system and browser that I encapsulated in the project.
operating system:
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) };}());If you want to determine whether the system is an iPad, you only need to determine if(os.isIpad) {}.
Browser:
var bw = (function() { var UserAgent = navigator.userAgent.toLowerCase(); return { isUc : /ucweb/.test(UserAgent), // UC browser isChrome : /chrome/.test(UserAgent.substr(-33,6)), // Chrome browser isFirefox : /firefox/.test(UserAgent), // Firefox isOpera : /opera/.test(UserAgent), // Opera browser isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // Firefox isOpera : /opera/.test(UserAgent), // Opera browser isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire browser is360 : /360se/.test(UserAgent), // 360 browser isBaidu : /bidubrowser/.test(UserAgent), // Baidu browser isSougou : /metasr/.test(UserAgent), // Sogou browser 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), // Cheetah Browser isWX : /micromessenger/.test(UserAgent), // WeChat built-in browser isQQ : /qqbrowser/.test(UserAgent) // QQ Browser};}());]
summary:
The browsers are tested by myself. The one that may have problems is the chrome browser. Because most browsers use the WebKit kernel, I intercepted the chrome navigation to distinguish them. If the information position of the chrome navigator or the length after chrome changes in the future, problems will easily arise, but it is OK at present.
Nowadays, because the UC browser on mobile phones often blocks Baidu's advertisements, but do not block Google advertisements. We can add to determine whether it is a UC browser. It will not display Baidu advertisements, but Google's advertisements will be displayed.
if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc browser");}else{// Not an operation performed by theuc browser}In fact, some special operations of specific browsers can be passed
JS gets browser information
Browser code name: navigator.appCodeName
Browser name: navigator.appName
Browser version number: navigator.appVersion
Support for Java: navigator.javaEnabled()
MIME type (array): navigator.mimeTypes
System platform: navigator.platform
Plugins (array): navigator.plugins
User Agent: navigator.userAgent