javascript是前端开发的主要语言,我们可以通过编写javascript程序来判断浏览器的类型及版本。javascript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另 一种是通过分析浏览器的useragent属性来判断的。本文对浏览器各自的useragent特点做一分析,并给出判断方法:
windows操作系统浏览器系列:
ie浏览器系列:
特征表现:均以 mozilla/ 开头,msie x.0; 中的x表示其版本;
判断方法:粗略判断可以只检索 msie x.0; 字符串即可,严格判断可检索 mozilla/x.0 (compatibal; msie x.0; windows nt,不过一般没有这个必要
windows版firefox:
特征表现:以mozilla/x.0开头,包含windows nt,gecko/和firefox/ ;
判断方法:粗略判断可以只检索 firefox/和windows nt 字符串,严格判断可以检索mozilla/ ,windows nt,gecko/和firefox/ 四个字符串;
windows版chrome:
特征表现: 以mozilla/x.0开头,包含windows nt,chrome/,同时包含applewebkit/,safari/;
判断方法:粗略判断可以只检索 windows nt和chrome/字符串,严格判断可以同时检索 mozilla/ ,windows nt,applewebkit/,safari/,chrome/ 五个字符串;
windows版opera:
特征表现:以opera/开头,含有windows nt,presto/ 字符串;
判断方法:粗略判断只检索 windows nt和opera/字符串,严格判断同时检索 opera/,windows nt 和 presto/;
windows版safari:
特征表现:以mozilla/开头,同时含有windows nt,applewebkit/,safari/;
判断方法:粗略判断可以检索含有 windows nt,safari/ 同时不包含 chrome/,严格判断需要同时含有mozilla/,windows nt,applewebkit/,safari/但是不包含chrome/;
小结:windows操作系统上的浏览器useragent均包含windows nt字符串来表征windows操作系统。
iphone平台浏览器系列:
iphone自带safari:
特征表现:以mozilla/开头,含有iphone字符串,同时含有 mobile/,safari/字符串;
判断方法:粗略判断只检索 iphone和safari/字符串,严格判断则要同时包含 mozilla/,iphone,mobile/,safari/四个字符串
iphone版opera mobile:
特征表现: 以opera/开头,含有iphone字符串,同时含有 opera mini/,presto/字符串;
判断方法:粗略判断只检索 iphone和opera/字符串,严格判断则要同时包含 opera/,iphone,opera mini/,presto/四个字符串
小结:iphone手机上的浏览器useragent均包含iphone字符串
android平台浏览器系列:
android自带浏览器(有人说其实是就chrome,但google自己未做表示,且还在开发一个android上运行的chrome to phone):
特征表现: 以mozilla/开头,含有android和linux 字符串,同时含有 applewebkit/,mobile safari/字符串;
判断方法:因为还不知道android上未来会不会有独立的safari(估计不会了),所以建议直接严格判断,检索 mozilla/,android,linux,applewebkit/,mobile safari/五个字符串
android版opera mobile:
特征表现: 以opera/开头,含有android和linux 字符串,同时含有 opera mobi/,presto/字符串;
判断方法:粗略判断只检索 android和opera/,严格判断则要同时包含opera/,android,linux,opera mobi/,presto/五个字符串
android版firefox:
特征表现:以mozilla/开头,含有android和linux 字符串,同时含有 firefox/,gecko/,fennec/字符串;
判断方法:粗略判断只检索 android和firefox/,严格判断则要同时包含mozilla/,android,linux,firefox/,gecko/,fennec/六个字符串
小结:android平台上的浏览器useragent均包含android和linux字符串
以上对windows、iphone、android三大平台的主流浏览器解析就基本结束了,其他平台的linux估计至少与android平台应该类似,而采用了mac os的ipad和麦金塔应该与iphone平台类似,故而暂时先不做解析,也因为手头没有那么多设备和操作系统来测试,希望日后能够补上。
现在的网站产品开发要求跟以前又不一样了,因为不仅要满足电脑浏览,还需要满足用户通过智能手机(这里仅指iphone、android、windows phone等真正的智能手机,blackberry和palm这样的小众半智能系统暂时不考虑,至于symbian这个伪智能系统就一边玩去吧)通过以上三个具有代表性的平台,也大致可以推测出根据浏览器useragent判断用户设备的解决方案了。
1、如果需要判断操作系统,方法比较简单,在useragent里面检索以下字符串:
含有windows nt:显而易见了,windows操作系统,nt后面的版本号可以判断os版本;
含有mac:苹果的mac os x或者其他mac os内核的系统;
含有iphone:苹果iphone手机专有的,一般情况下也应该含有mac;
含有ipad:苹果ipad平板电脑(资料表明ipad的浏览器useragent同时含有mac,iphone,ipad);
含有linux:linux操作系统或者其他以linux作为内核的操作系统;
含有android:谷歌的android操作系统,有可能是智能手机,也有可能是安卓版的平板电脑哦,一般情况下android平台上的useragent也应该包含linux;
含有unix,sunos,bsd三者之一:unix系统,其实对这个系统的用户体验问题,目前几乎可以不用考虑了;
含有ubuntu:ubuntu定制版的linux
……
你也看到了,判断操作系统及其版本其实并不一直有用,但总有能用到的地方,比如开发专门针对iphone、ipad、android等设备屏幕分辨率的页面
2、判断浏览器的内核,方法也不困难,我自己琢磨出来的,不一定都对啊:
ie(trident)内核(ie for mac, ies4linux之类的就不用说了,只考虑windows下的):以mozilla/开头,含有windows nt和msie字符串;
firefox(gecko)内核:以mozilla/开头,含有firefox/和gecko/字符串的就是啦,其中android版的还带有fennec/字符串;
opera()内核:以opera/开头,含有presto/字符串,其中iphone版还带有opera mini/,android版也带有opera mobi/;
webkit内核:以mozilla/开头,含有applewebkit/和safari/字符串,其中带有chrome/的就是chrome浏览器,不带的就是safari或其他;
以上就是主要的浏览器内核了
浏览器内核才是解决兼容性的关键问题所在,然而,这个兼容性问题已经有jquery和extjs等框架帮你解决了,因此这个判断只针对个别页面的css样式在不同内核渲染效果不同的情况下使用,当然了,同样的内核在智能手机和电脑等不同设备上渲染结果也不同,这一点也需要注意。
3、判断浏览器useagent的实际应用举例:
不同浏览器内核对页面的渲染效果不同,虽然已经有jquery和extjs等为我们做了兼容处理,但是依然会有一些细小的差别需要我们单独处理,此时需要判断浏览器内核;
用户并不仅仅是通过电脑访问网站的,随着智能手机的日益普及还有平板电脑的大行其道,使用这两者来上网的比例越来越高,怎么办?平板电脑还好,屏幕大分辨率高,智能手机受限于他的屏幕尺寸和分辨率,虽有强劲的处理能力,也可以完美支持现有的网站,但是为客户多考虑一点总没有坏处你说对吧?毕竟通过局部缩放拖拽的方式看网页很不舒服,这时呢,我们就可以专门为iphone、android这样的窄条屏幕提供一个专用版本来布局了,一来提升浏览体验,二来降低网络流量,加快访问速度;
做访客流量分析,通过判断客户浏览器类型并记录其数量,来优化设计自己的网站,以分别提升其客户体验
复制代码 代码如下:
或:
kindeditor开源编辑器源码中的检测浏览器的方法:
ke = {};
ke.browser = (function () {
var ua = navigator.useragent.tolowercase();
return {
version:ua.match(/(msie|firefox|webkit|opera)[\/:\s](\d+)/) ? regexp.$2 : 0,
ie:(ua.indexof(msie) > -1 && ua.indexof(opera) == -1),
gecko:(ua.indexof(gecko) > -1 && ua.indexof(khtml) == -1),
webkit:(ua.indexof(applewebkit) > -1),
opera:(ua.indexof(opera) > -1)
};
})();