用户代理字符串userAgent可实现的四个识别


Posted in Javascript onSeptember 20, 2015

定义

用户代理字符串:navigator.userAgent

HTTP规范明确规定,浏览器应该发送简短的用户代理字符串,指明浏览器的名称和版本号。但现实中却没有这么简单。

发展历史

【1】1993年美国NCSA国家超级计算机中心发布了世界上第一款web浏览器Mosaic,该浏览器的用户代理字符串为Mosaic/0.9

【2】Netscape公司进入浏览器开发领域,将自己产品的代号定名了Mozilla(Mosaic Killer)的简写,用户代理字符串格式为Mozilla/版本号 [语言] (平台;加密类型)

【3】IE发布的第一款赢得用户广泛认可的web浏览器IE3,当时Netscap已经占据了绝对市场份额,为了让服务器能够检测到IE,IE将用户代理字符串修改成兼容Netscape的形式:Mozilla/2.0(compatible;MSIE版本号;操作系统)

【4】各浏览器陆续出现,用户代理字符串的显示格式也越来越类似…… 

测试工具

 利用各桌面浏览器调试工具,主要是IE调试工具及chrome的emulation手机调试工具

 用户代理字符串userAgent可实现的四个识别

桌面端测试结果

【1】IE

[1.1]IE3

Mozilla/2.0 (compatible; MSIE3.02; windows 95)

[1.2]IE6

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

[1.3]IE7

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

[1.4]IE8

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

[1.5]IE9

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

[1.6]IE10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

[1.7]IE11

Mozilla/5.0 (MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET

CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; GWX:QUALIFIED; rv:11.0) like Gecko

【2】chrome

Mozilla/5.0 (Windows NT 6.1; WOW64)G AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36

【3】safari

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

【4】firefox

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0

【5】opera

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25

移动端测试结果

【1】ipad

Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

【2】iphone

Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4

【3】android

Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36

识别浏览器内核

常见的内核有Trident、Gecko和Webkit

[注意]因为Trident和Webkit的用户代理字符串中可能会出现 like Gecko的字眼,所以最后再测Gecko

function whichEngine(){
 var ua = navigator.userAgent;
 //Trident内核
 if(/Trident/.test(ua)){
  return "Trident";
 }
 //Webkit内核
 if(/WebKit/.test(ua)){
  return "WebKit";
 }  
 //Gecko内核
 if(/Gecko/.test(ua)){
  return "Gecko";
 }
}
console.log(whichEngine());//IE11下显示"Trident"

识别浏览器版本

【1】IE

IE3-IE10都可以通过MSIE的版本号来判断,因为有的IE11并不出现MSIE字符,且safari中也有rv字段,所以IE11需要通过rv后的版本号和Trident来配合判断

function isIE(){
 var ua = navigator.userAgent;
 //检测Trident引擎,IE8+
 if(/Trident/.test(ua)){
  //IE11+
  if(/rv:(\d+)/.test(ua)){
   return RegExp["$1"];
  } 
  //IE8-IE10 
  if(/MSIE (\d+)/.test(ua)){
   return RegExp["$1"];
  }  
 }
 //检测IE标识,IE7-
 if(/MSIE (\d+)/.test(ua)){
  return RegExp["$1"];
 } 
}
console.log(isIE());//只有IE会返回版本号,其他浏览器都返回undefined

【2】chrome

function isChrome(){
 var ua = navigator.userAgent;
 //先排除opera,因为opera只是在chrome的userAgent后加入了自己的标识
 if(!/OPR/.test(ua)){
  if(/Chrome\/(\S+)/.test(ua)){
   return RegExp["$1"];
  } 
 } 
}
console.log(isChrome());//只有Chrome会返回版本号45.0.2454.93,其他浏览器都返回undefined

【3】safari

function isSafari(){
 var ua = navigator.userAgent;
 //先排除opera
 if(!/OPR/.test(ua)){
  //检测出chrome和safari浏览器
  if(/Safari/.test(ua)){
   //检测出safari
   if(/Version\/(\S+)/.test(ua)){
    return RegExp["$1"];
   }  
  }
 } 
}
console.log(isSafari());//只有safari会返回版本号5.1.7,其他浏览器都返回undefined

【4】firefox

function isFireFox(){
 if(/Firefox\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isFireFox());//只有firefox会返回版本号40.0,其他浏览器都返回undefined

【5】opera

function isOpera(){
 if(/OPR\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isOpera());//只有opera会返回版本号32.0.1948.25,其他浏览器都返回undefined

识别操作系统

使用navigator.platform检测操作系统更加简单,因为其可能包括的值为“Win32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等,且在不同浏览器中是一致的。

而通过navigator.userAgent可以来得到window系统的详细信息。

windows版本                        ->             内核版本
Windows XP                        ->             5.1
Windows Vista                     ->             6.0
Windows 7                         ->             6.1
Windows 8                         ->             6.2
Windows 8.1                       ->             6.3
Windows 10技术预览版               ->             6.4
Windows 10(Build 9880+)           ->             10

function whichSyStem(){
 var ua = navigator.userAgent;
 var pf = navigator.platform;
 if(/Mac/.test(pf)){
  return "Mac";
 }
 if(/X11/.test(pf) || /Linux/.test(pf)){
  return "Linux";
 }
 if(/Win/.test(pf)){
  if(/Windows NT (\d+\.\d+)/.test(ua)){
   switch(RegExp["$1"]){
    case "5.0":
     return "Windows 2000";
    case "5.1":
     return "Windows XP";
    case "6.0":
     return "Windows Vista";
    case "6.1":
     return "Windows 7";
    case "6.2":
     return "Windows 8";
    case "6.3":
     return "Windows 8.1";
    case "6.4":
    case "10":
     return "Windows 10";     
   }
  }
 }
}
console.log(whichSyStem())//Windows 7

识别移动端设备

function whichMobile(){
 var ua = navigator.userAgent;
 if(/iPhone OS (\d+_\d+)/.test(ua)){
  return 'iPhone Mac' + RegExp.$1.replace("_",".");
 }
 if(/iPad.+OS (\d+_\d+)/.test(ua)){
  return 'iPad Mac' + RegExp.$1.replace("_",".")
 }
 if(/Android (\d+\.\d+)/.test(ua)){
  return 'Android' + RegExp["$1"];
 }
}
console.log(whichMobile())//Android 5.1
Javascript 相关文章推荐
extjs两个tbar问题探讨
Aug 08 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
js实现简单数字变动效果
Nov 06 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python正则表达式的使用范例详解
2014/08/08 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python 用下标截取字符串的实例
2018/12/25 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
家具商场的活动方案
2014/08/16 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
出差报告怎么写
2014/11/06 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书