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判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 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制作简单的内容采集器的原理分析
2008/10/01 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
python实现xlsx文件分析详解
2018/01/02 Python
python中几种自动微分库解析
2019/08/29 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
python中remove函数的踩坑记录
2021/01/04 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
教师求职自荐信范文
2015/03/04 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
廉政承诺书2015
2015/04/28 职场文书
酒店厨房管理制度
2015/08/06 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
html粘性页脚的具体使用
2022/01/18 HTML / CSS
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL