FE综合

客户端浏览器检测

目录

前言

　　几种web浏览器在实现相关标准时会有一些差异和区别，这可能会给开发带来一些问题。此时就会需要进行客户端检测从而给出不同的方案。但是，从根本上来讲，只要能够找到更通用的方法，就应该优先采用更通用的方法，先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。《JavaScript权威指南》相关描述如下：

检测方法与主要参数

方法


主流浏览器的userAgent示例

Chrome

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

Firefox

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

Safari

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

Opera

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.152 Safari/537.36 OPR/29.0.1795.60；

IE

IE7如下：
mozilla/4.0 (compatible; msie 7.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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

IE8如下：
mozilla/4.0 (compatible; msie 8.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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

但是IE9+ 对字符串的格式做了一点调整；mozilla的版本号增加到5.0;

IE9如下：
mozilla/5.0 (compatible; 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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

IE10如下：
mozilla/5.0 (compatible; msie 10.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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e)

IE11如下：
mozilla/5.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; media center pc 6.0; infopath.3; .net4.0c; .net4.0e; rv:11.0) like gecko

IOS和Android

ios设备的基本格式如下：
Mozilla/5.0 (平台；加密类型；操作系统或CPU like Mac OS x;语言)
AppleWebKit/ AppleWebKit版本号(KHTML,like Gecko) Version/浏览器版本号

Android浏览器中默认格式与IOS格式相似，没有移动版本号(但有Mobile记号)：
Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91)
AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

对浏览器客户端检测的应用实例

　　手机淘宝团队开源的移动端自适应方案lib-flexible就需要根据当前浏览器信息对页面html元素设置不同的font-size从而达到动态修改rem基准px值的目的，其中一段源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

客户端检测代码

参考： http://web.jobbole.com/82452/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
var client = function(){
          var engine = {
              // 呈现引擎
              ie: 0,
              gecko:0,
              webkit: 0,
              khtml:0,
              opera:0,
              //其他版本号
              ver: null
          };
          var browser = {
              // 浏览器
              ie: 0,
              firefox:0,
              safari:0,
              konq:0,
              opera:0,
              chrome:0,
              // 其他的版本
              ver: null
          };
          var system = {
              win: false,
              mac: false,
              xll: false,
              // 移动设备
              iphone: false,
              ipod: false,
              ipad: false,
              ios: false,
              android:false
           };
           // 在此检测呈现引擎，平台和设备
           return {
               engine: engine,
               browser: browser,
               system: system
           };
       }();
       var engine = client;
       var browser = client;
       var ua = navigator.userAgent.toLowerCase();
       if(ua.match(/opr\/([\d\.]+)/) || window.opera) {
            var result = ua.match(/opr\/([\d\.]+)/);
            engine.ver = browser.ver = result[1];
            engine.opera = browser.opera = parseFloat(engine.ver);
            if(window.opera) {
                 engine.ver = browser.ver = window.opera.version();
                 engine.opera = browser.opera = parseFloat(engine.ver);
             }
        }else if(/applewebkit\/(\S+)/.test(ua)) {
            engine.ver = RegExp["$1"];
            engine.webkit = parseFloat(engine.ver);
            // 确定是chrome还是safari
            /*
             * chrome用户代理字符串
             * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) 
             * Chrome/42.0.2311.152 Safari/537.36
             */
             if(/chrome\/(\S+)/.test(ua)) {
                  browser.ver = RegExp["$1"];
                  browser.chrome = parseFloat(browser.ver);
             }else if(/version\/(\S+)/.test(ua)) {
                  /*
                   * safari用户代理字符串
                   * Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) 
                   * Version/5.1.7 Safari/534.57.2
                   */
                  browser.ver = RegExp["$1"];
                  browser.safari = parseFloat(browser.ver);
             }else {
                  //近似地确定版本号
                  var safariVersion = 1;
                  if (engine.webkit < 100){
                      safariVersion = 1;
                  } else if (engine.webkit < 312){
                      safariVersion = 1.2;
                  } else if (engine.webkit < 412){
                      safariVersion = 1.3;
                  } else {
                      safariVersion = 2;
                  }
                  browser.safari = browser.ver = safariVersion;
              }
        }else if (/khtml\/(\S+)/.test(ua) || /konqueror\/([^;]+)/.test(ua)){
              engine.ver = browser.ver = RegExp["$1"];
              engine.khtml = browser.konq =  parseFloat(engine.ver);
 
        }else if(/rv:([^\)]+)\) gecko\/\d{8}/.test(ua)){
              engine.ver = RegExp["$1"];
              engine.gecko = parseFloat(engine.ver);
              /*
               * firefox的用户代理的字符串
               * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) 
               * Gecko/20100101 Firefox/38.0
               */
              // 确定是不是firefox
              if(/firefox\/(\S+)/.test(ua)) {
                  browser.ver = RegExp["$1"];
                  browser.firefox = parseFloat(browser.ver);
              }
         }else if (/msie ([^;]+)/.test(ua) || "ActiveXObject" in window){
              if("ActiveXObject" in window) {
                 if(/msie ([^;]+)/.test(ua)) {
                    engine.ver = browser.ver = RegExp["$1"];
                    engine.ie = browser.ie = parseFloat(engine.ver);
                 }else {
                    if(/rv:([^\)]+)\)/.test(ua)) {
                        engine.ver = browser.ver = RegExp["$1"];
                        engine.ie = browser.ie = parseFloat(engine.ver);
                    }
                 }
              }
 
         }
         // 检测平台
         var system = client;
         var platform = navigator.platform;
         system.win = platform.indexOf("Win") == 0;
         system.mac = platform.indexOf("Mac") == 0;
         system.x11 = (platform.indexOf("X11") == 0) || (platform.indexOf("Linux") == 0);
 
         // 移动设备
         system.iphone = ua.indexOf("iphone") > -1;
         system.ipod = ua.indexOf("ipod") > -1;
         system.ipad = ua.indexOf("ipad") > -1;
         //检测iOS 版本
         if (system.mac && ua.indexOf("mobile") > -1){
              if (/cpu (?:iphone )?os (\d+_\d+)/.test(ua)){
                  system.ios = parseFloat(RegExp.$1.replace("_", "."));
              } else {
                  system.ios = 2; //不能真正检测出来，所以只能猜测
              }
          }
          //检测Android 版本
          if (/android (\d+\.\d+)/.test(ua)){
              system.android = parseFloat(RegExp.$1);
          }

分享到： QQ空间 新浪微博 腾讯微博 微信 更多