在现实当中,浏览器之间的差异以及不同浏览器的怪癖,多得不胜枚举。因此,客户端检测除了是一种补救措施之外,更是一种行之有效的开发策略

检测 web 客户端的手段有很多,而且各有利弊。但最重要的是要知道,不到万不得已,就不要使用客户端检测!如果能找到更通用的方法,应优先采用更通用的方法。既是,先设计通用的方案,在针对差异增强该方案

能力检测

能力检测的目标不是识别特定浏览器,而是识别浏览器的能力。只要确定浏览器的能力,就可以给出特定解决方案

  • 检测的时候应该尽可能精确,例如,你想检测 sort,不应该只检测是否存在 sort 属性,而应该更深一步检测 sort 是否是 function 类型的。而且需要注意 typeof 在各个浏览器之间的差异
  • 能力检测并非浏览器检测,并不能识别出特定的浏览器,因为其他浏览器新版本可能会改变,导致你的检测逻辑不严谨
  • 检测完,应该把检测结果保存起来,这样就不需要每次都进行

例如:早期针对 IE 的检测:

function getElement(id) {
    if (document.getElementById) {
        return document.getElementById(id);
    } else if (document.all) {
        return document.all[id];
    } else {
        throw new Error('getElementById不可用');
    }
}

怪癖检测

识别浏览器的特殊行为,检测该浏览器存在什么缺陷

  • 一般来说,怪癖都是个别浏览器独有的,故归为 bug。
  • 由于检测怪癖需要运行代码,用来检验缺陷。故建议仅检测有直接影响到,并且最好在一开始便执行- 检测

例如 : IE8 及更早版本,有个 bug,新增属性如果与某个 Enumerable 标为 false 的原型属性同名,for in 循环无法遍历出它。

用户代理检测(user-agent)

用户代理通过检测用户代理字符串来确定实际使用的浏览器。在服务器端,这是一种常用且广为接受的做法,而在客户端,则被当做万不得已才用的做法,优先级在能力检测和怪癖检测之后。

识别呈现引擎:IE、 Gecko、Webkit、KHTML、Opera

由于历史原因,有些引擎返回的 ua 中存在诸多不一致的地方。所以在检测的时候,检测的顺序很重要
Opera --> Webkit --> KHTML --> Gecko --> IE.

识别浏览器

大多数情况下,识别呈现引擎足以让我们才去正确的操作。但是,只有呈现引擎还不能说明存在所需的 js 功能。例如,safari 和 chrome 的呈现引擎都是 webkit,但他们的 js 引擎却不一样。
浏览器:IE , Firefox,safari,konq,opera,chrome

识别平台

通过 navigator.platform 来检测不同的平台。
navigator.platform 属性可能的值包括:" Win32 " , " Win64 " , " MacPPC " , " MacIntel " , " X11 " , " Linux i686 ".

识别 windows 操作系统

通过检测 userAgent 中的字符串,用正则识别不同的 windows 版本
win2000 之后,大部分浏览器表示操作系统的字符串大部分相同,只有版本号有变化。

识别移动设备

  • ios 设备: 检查是不是 Mac OS ,字符串中是否包含“Mobile”,然后再使用正则确定是否存在 IOS 版本号。
  • android: 搜索字符串“Android”,并取得紧随其后的版本号

识别游戏系统

Wii 或 playstation

小结

用户代理检测是客户端检测的最后一个选择。只要可能应该优先采用能力检测,怪癖检测次之

用户代理检测一般适用于下列情况:

  • 为了跟踪分析等目的需要知道确切的浏览器
  • 不能直接准确的使用能力检测和怪癖检测。
  • 同一款浏览器在不同的平台上具备不同的能力,这时候就需要确定浏览器位于哪个平台。

chen4342024
180 声望23 粉丝

GitHub:[链接]