JS通过分析userAgent属性来判断浏览器的类型及版本


Posted in Javascript onMarch 28, 2014

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这样的窄条屏幕提供一个专用版本来布局了,一来提升浏览体验,二来降低网络流量,加快访问速度;
做访客流量分析,通过判断客户浏览器类型并记录其数量,来优化设计自己的网站,以分别提升其客户体验

<script type="text/javascript"> 
var Sys = {}; 
var ua = navigator.userAgent.toLowerCase(); 
var s; 
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : 
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : 
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : 
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; //以下进行测试 
if (Sys.ie) document.write('IE: ' + Sys.ie); 
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox); 
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome); 
if (Sys.opera) document.write('Opera: ' + Sys.opera); 
if (Sys.safari) document.write('Safari: ' + Sys.safari); 
</script> 
或: 
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) 
}; 
})();
Javascript 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
vue组件的写法汇总
Apr 12 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 #Javascript
js如何调用qq互联api实现第三方登录
Mar 28 #Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 #Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 #Javascript
js中精确计算加法和减法示例
Mar 28 #Javascript
查找页面中所有类为test的结点的方法
Mar 28 #Javascript
js 验证身份证信息有效性
Mar 28 #Javascript
You might like
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
php时间计算相关问题小结
2016/05/09 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
jquery对表单操作2
2011/04/06 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
vue实现图片上传预览功能
2019/12/23 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Python笔记之工厂模式
2019/11/20 Python
在python中使用nohup命令说明
2020/04/16 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
工地门卫岗位职责
2013/12/30 职场文书
食品安全宣传标语
2014/06/07 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015年个人思想总结
2015/03/09 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书