Navigator的5个主要属性:
appName:Web浏览器的名称
appVersion:浏览器的版本号和其他版本信息
userAgent:浏览器在它的USER-AGENT HTTP标题中发送的字符串。该属性包含appName,appVersion属性的所有信息
appCodeName:浏览器的代码名
platform:客户浏览器所在的操作系统
1.1 特征检测
这个是针对要了解浏览器的具体哪一项信息或者具体支持哪一项特定功能来决定的检测方式。
非精确判断,但却最安全。我们只要知道它存在不存在就可以了。
打个比方,我们只要if(navigator.appName.indexOf("Netscape")!=-1){***}
而不要输出具体的浏览器的名称结果。
1.2 字符串检测
这种比较正规的了,虽然检测浏览器的型号和类型很困难而且很容易出现误差。比如五大主流浏览器的检测代码:
var ua = navigator.userAgent.toLowerCase(); var info={ ie:/msie/.test(ua)&&!/opera/.test(ua), op:/opera/.test(ua), sa:/version.*safari/.test(ua), ch:/chrome/.test(ua), ff:/gecko/.test(ua)&&!/webkit/.test(ua) }; |
IE的版本号(因为IE版本差异大,而且与操作系统绑定一般不能升级):下面的代码可以检测IE的版本号(不能检测IE11,微软就是喜欢搞事请):
function getIEVer() { var nu = navigator.userAgent; var a= nu.indexOf("MSIE"); return a<0 || parseFloat(nu.substring(a+5,nu.indexOf(";",a))); } alert(getIEVer()); |
客户端操作系统:
var isWin = (navigator.userAgent.indexOf("Win")!=-1) |
如果是windows操作系统,则返回TRUE。其他的是"Mac","X11","Linux"分别是Macintosh,UNIX,Linux。
下面给出全面的设备信息监测代码:
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,//火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') === -1, //是否web应该程序,没有头部与底部 weixin: u.indexOf('MicroMessenger') > -1, //是否微信 qq: u.match(/sQQ/i) === " qq" //是否QQ }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() }; //判断是否IE内核 if(browser.versions.trident){ alert("is IE"); } //判断是否webKit内核 if(browser.versions.webKit){ alert("is webKit"); } //判断是否移动端 if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); } if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); //苹果端 } else if (/(Android)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); //安卓端 } else { //pc端 } var ua= navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) === "micromessenger") { alert("is wechat"); } |