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 相关文章推荐
Js sort排序使用方法
Oct 17 Javascript
jquery 插件学习(六)
Aug 06 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
document.getElementById介绍
2011/09/13 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python学习笔记之常用函数及说明
2014/05/23 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
对pandas中apply函数的用法详解
2018/04/10 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python Selenium参数配置方法解析
2020/01/19 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
水污染治理工程专业自荐信
2014/06/21 职场文书
个人简历自荐信
2014/06/26 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python