if (client.engine.webkit) { //if it's WebKit if (client.browser.chrome){ //执行针对Chrome 的代码 } else if (client.browser.safari){ //执行针对Safari 的代码 } } else if (client.engine.gecko){ if (client.browser.firefox){ //执行针对Firefox 的代码 } else { //执行针对其他Gecko 浏览器的代码 } } 识别平台 目前有三大主流平台(windows,Mac,Unix(包括各种linux))；因为那些浏览器(safari,opera,firefox)在不同的平台可能会有不同的问题；为了检测这些平台，还需要像下面这样再添加一个新对象； 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 }; // 在此检测呈现引擎，平台和设备 return { engine: engine, browser: browser, system: system }; }();
如上的代码添加了一个包含3个属性的新变量system，其中，win属性表示是否为windows平台，mac代表Mac，xll代表是Unix，system的对象的属性默认都为false，在确定平台时，检测navigator.platform要比检测用户代理字符串更简单，检测用户代理字符串在不同的浏览器中会给出不同的平台信息，而navigator.platform属性可能的值包括”Win32”,”Win64”,”MacPPC”,”MacIntel”,”Xll”和”Linux i686”,这些值在不同的浏览器中都是一致的，检测代码非常直观；如下代码：
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);
比如我现在在chrome浏览器下打印如下：
console.log(system)
截图如下：
如果我想知道是win32或者是win64的话，我们可以使用这句代码打印即可
Console.log(navigator.platform);
识别移动设备
可以通过简单地检测字符串”iPhone”,”iPod”,”iPad”,就可以分别设置响应属性的值了。
system.iphone = ua.indexOf(“iphone”) > -1; system.ipod = ua.indexOf(“ipod”) > -1; system.ipad = ua.indexOf(“ipad”) > -1;
除了知道iOS 设备，最好还能知道iOS 的版本号。在iOS 3 之前，用户代理字符串中只包含"CPU like
Mac OS"，后来iPhone 中又改成"CPU iPhone OS 3_0 like Mac OS X"，iPad 中又改成"CPU OS 3_2
like Mac OS X"。也就是说，检测iOS 需要正则表达式反映这些变化。
//检测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; //不能真正检测出来，所以只能猜测 } }
检查系统是不是Mac OS、字符串中是否存在"Mobile"，可以保证无论是什么版本，system.ios
中都不会是0。然后，再使用正则表达式确定是否存在iOS 的版本号。如果有，将system.ios 设置为
表示版本号的浮点值；否则，将版本设置为2。（因为没有办法确定到底是什么版本，所以设置为更早的
版本比较稳妥。）
检测Android 操作系统也很简单，也就是搜索字符串"Android"并取得紧随其后的版本号。
//检测Android 版本 if (/android (\d+\.\d+)/.test(ua)){ system.android = parseFloat(RegExp.$1); }
由于所有版本的Android 都有版本值，因此这个正则表达式可以精确地检测所有版本，并将
system.android 设置为正确的值。
在了解这些设备信息的基础上，就可以通过下列代码来确定用户使用的是什么设备中的WebKit 来
访问网页：
if (client.engine.webkit){ if (client.system.ios){ //iOS 手机的内容 } else if (client.system.android){ //Android 手机的内容 } }
因此所有的JS代码如下：
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); }
您可能感兴趣的文章: