浏览器类型鉴别那些事 – 随啵不逐流

image

方法有两种:

  1. 根据浏览器特性来判断
  2. 根据UA来检测

具体使用哪种方法要看具体需求的场景

场景一:为了让用户有较流畅完整的体验,在站点提示用户使用chrome或者IE,这种场景对浏览器类型的判断并非特别严格,可以使用检测UA的方法。(因为很多浏览器厂商会篡改UA标识)。
针对此场景举个栗子:
*根据不同浏览器对API或标准实现的不同来判断浏览器,接着做相应兼容性操作。

var button = document.getElementById("button");
if(button.addEventListener){
button.addEventListener("click", handler, false);
}else{
button.attachEvent("onclick", handler);
}

function handler(event){
var src = event.target ? event.target : event.srcElement;
console.log(src.value);
}

场景二:如果是要调用的某个API不同内核的浏览器实现不同,这种情况要做精准的判断,直接检测其某个独有的特性。下面着重说下这种方法。
比如我的需求是检测提示使用非chrome浏览器的用户使用chrome浏览器(或webkit内核浏览器),适合使用通过检测UA,判断浏览器类型的方法。

console.log(navigator.userAgent);

先看一下国内桌面浏览器市场份额

image
来自:CNZZ

image
来自:百度统计
结论:国内市场,IE + chrome + Safari + 360 + sogou + QQ 占据90%以上份额
另外Firefox、猎豹、UC等几个份额超过1%

IE

IE可以通过检测“MSIE”字段来识别

IE10的ua
image
IE11的ua
image

chrome

UA检验较难,很多国内浏览器厂商都有相同字段。三个字段,APPLEWEBKIT/CHROME/SAFARI

image

Safari

检测“SAFARI”和“VERSION”,version后面是版本号

image

Firefox

通过检测“Firefox”字段即可

image

国产浏览器们

国产浏览器很多是双核模式,Trident和Webkit。一般会把自己的标识带在最后面。

拿它们没办法,只能退而求其次,判断是否使用webkit内核,检测“Webkit”字符串

sogou搜狗

检测“SE 2.X MeSr 1.0”字段

image

QQ浏览器

极速模式(使用chrome内核),检测"QQBrowser"字段

image

兼容模式(使用IE内核),和IE一样检测MSIE字段

image

UC

检测“UBrowser”字段

image

360安全浏览器

比较无语,在自己导航页会显示UA,其他域名下会隐藏UA,有的话就是QIHU 360SE

image

判断非chrome浏览器的实现代码

(function(){
var ua = navigator.userAgent.toUpperCase();
if(/QQBROWSER/.test(ua) ||/UBROWSER/.test(ua) || /SE[s.a-zA-Zd]+MESR/.test(ua)){
console.log("国产浏览器");
handler()
}else if(/VSERSION/[d.]+SAFARI]/.test(ua)){//safari浏览器
console.log("safari");
handler()
}else if(/FIREFOX/.test(ua)){
console.log("Firefox");
handler()
}else if(/MSIE/.test(ua)){//IE浏览器或国产IE内核浏览器
console.log("IE");
handler();
}
})();

参考

数据统计

http://brow.data.cnzz.com/main.php?s=brow&uv=0&type=3

http://tongji.baidu.com/data/browser/

检测方法

http://www.cnblogs.com/hykun/p/Ua.html#cnBrowser

http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html

http://qbaty.iteye.com/blog/977601

题图来自:http://www.theregister.co.uk/2014/12/12/yahoo_suggests_firefox_upgrade/
_________

github博客,求star:https://github.com/suibobuzhuliu/blog/issues

本文链接:浏览器类型鉴别那些事,转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量