JS中特性与UA检测

最早的浏览器嗅探即用户代理（user-agent）检测，服务端（以及后来的客户端）根据user-agent字符串来确定浏览器的类型。在此期间，服务器会完全根据user-agent字符串屏蔽某些特定的浏览器查看网站内容。其中获益最大的浏览器就是网景浏览器。不可否认，网景（在当时）是最强大的浏览器，以至于很多网站都认为只有网景浏览器才会正常展现他们的网页。网景浏览器的user-agent字符串是Mozilla/2.0 (Win95; I)。当IE首次发布，基本上就被迫沿用了网景浏览器user-agent字符串的很大一部分，以此确保服务器能够为这款新的浏览器提供服务。因为绝大多数的用户代理检测的过程都是查找“Mozilla”字符串和斜线之后的版本号，IE浏览器的user-agent字符串设置成Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)，是不是觉得很鸡贼。IE采用了这样的用户代理字符串，这意味着每个浏览器类型检测也会把这款新的浏览器识别为网景的Navigator浏览器。这也使得新生浏览器部分复制现有浏览器用户代理字符串成为了一种趋势。Chrome发行版的用户代理字符串包含了Safari的一部分，而Safari的用户代理字符串又相应包含了Firefox的一部分，Firefox又依次包含了Netscape（网景）用户代理字符串的一部分。

基于UA检测是极其不靠谱的，并且维护困难，UA可以伪造，一个声明为Chrome的浏览器它可能是其他浏览器

每次有新的浏览器出现，或者已有的浏览器版本升级，原先基于UA检测的代码都要更新，维护成本和出错几率极大

所以我建议你尽可能避免检测UA，即使在不得不这样做的情况下。

2.8.2 特性检测

我们希望有一种更聪明的基于浏览器条件（进行检测）的方法，于是一种叫特性检测的技术变得流行起来。特性检测的原理是为特定浏览器的特性进行测试，并仅当特性存在时即可应用特性检测，例如：

// 不好的写法if (navigator.userAgent.indexOf("MSIE 7") > -1) { }// 好的写法if (
document
.getElementById) {}

因为特性检测不依赖于所使用的浏览器，而仅仅依据特性是否存在，所以并不一定需要新浏览器的支持。例如，在DOM早期的时候，并非所有浏览器都支持document.getElementById()，所以根据ID获取元素的代码看起来就有些冗余。

// 好的写法// 仅为举例说明特性检测，现代浏览器都支持getElementByIdfunction getById (id) { var el = null; if (document.getElementById) { // DOM
 el = document.getElementById(id);
 } else if (document.all) { // IE
 el = document.all[id];
 } else if (document.layers) { // Netscape <= 4
 el = document.layers[id];
 } return el;
}

这种方法同样适用于当今最新的浏览器特性检测，浏览器已经实验性地实现了这些最新的特性，而规范还正在最后确定中。常见的Polyfill就是特性检测的应用，例如：

if (!Array.isArray) { Array.isArray = function (arr) { return 
Object
.prototype.toString.call(arr) === '[object Array]'
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

web开发中如何避免空比较

web开发中UI层的松耦合