客户端检测

[LumiereXyloto]

能力检测

概念

浏览器能力检测的目的是，确保浏览器在实现公共接口的时候保持一致。

能力检测的基本模式：

function polyfill () {
   if (object.propertyInQuestion) {
        // 如果当前浏览器支持，则使用object.propertyInQuestion
    } else {
        // 自定义方法让浏览器支持
    } 
}

可靠的能力检测

为了确保能力检测的可靠性，应该针对性的进行检测。例如，检测对象是否具有sort()方法，最好去判断object.sort是否是一个函数而非存在。

在可能的情况下，尽量使用typeof进行能力检测

// 错误，当对象中存在sort属性的时候也会返回true
function isSortable(object) {
    return !!object.sort // 双非操作符得到布尔值
}

// 正确
function isSortable(object) {
    return typeof object.sort === 'function'
}

能力检测比浏览器检测更好

在进行浏览器检测时，需要注意有的方法并不是某个浏览器独有的。根据浏览器不同将能力组合起来是更可取的方式。

当知道自己需要哪些特定的浏览器特性时，可以直接一次性检测所有相关特性，而不是检测当前浏览器来进行分别polyfill

// 确定浏览器是否有DOM1规定的能力
var hasDOM1 = function = !!(document.getElementById && document.createElement && document.getElementByTagName)

怪癖检测

概念

怪癖检测的目标是识别浏览器的特殊行为（bug）。

实践

IE8以及之前版本如果有实例属性与[[Enumerable]]为false的原型属性同名，则实例属性不会出现在for-in循环中。检测是否有怪癖方法：

var hasDontEnumeQuirk = function() {
    var o = {
        toString: function(){}
    }
    for (var prop in o) {
        if (prop === 'toString') {
            return false
        }
    }
    
    return true
}

用户代理检测

概念

• 用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。用户代理字符串随HTTP请求头中的User-Agent发送给服务器。客户端可以通过navigator.userAgent属性访问。
• 可以检测的信息包括浏览器、平台、操作系统以及浏览器版本
• 用户代理检测还是为了解决不同浏览器不一致的问题。只要可能，应该优先采取能力检测和怪癖检测。
• 适用场景：
  • 不能直接准确的使用能力检测或者怪癖检测
  • 同一浏览器在不同平台具备不同的能力
  • 为了跟踪分析目的需要明确知道浏览器