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入门基础 document.write输出
Feb 22 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
ASP Json Parser修正版
2009/12/06 Javascript
js jquery数组介绍
2012/07/15 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Python 性能优化技巧总结
2016/11/01 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
python无序链表删除重复项的方法
2020/01/17 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
几个Shell Script面试题
2012/08/31 面试题
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
cf收人广告词
2014/03/14 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
Python上下文管理器Content Manager
2021/06/26 Python