浏览器能力检测方法问询：替代JavaScript Navigator对象的更佳方案

没错，依赖Navigator.userAgent这类浏览器标识的检测方法早已不推荐，现在行业内的标准方案是特性检测（Feature Detection）——直接检测你代码需要用到的具体API或功能，而非通过浏览器推断特性支持情况。

特性检测的核心思路 #

特性检测的逻辑很简单：先检查目标特性是否存在、是否能正常工作，再决定执行对应的代码分支，而不是先判断“这是Chrome还是Firefox”再假设它支持什么功能。

实用示例 #

1. 检测原生Promise支持

// 不仅检查存在性，还确认是原生实现（避免第三方polyfill干扰）
if (typeof Promise !== 'undefined' && /native code/.test(Promise)) {
  // 使用原生Promise处理异步逻辑
} else {
  // 加载Promise polyfill或使用回调降级
}

2. 检测事件绑定API支持

if (window.addEventListener) {
  // 标准事件绑定方式
  element.addEventListener('click', handleClick);
} else if (window.attachEvent) {
  // 兼容IE8及更早版本
  element.attachEvent('onclick', handleClick);
} else {
  // 最基础的降级方案
  element.onclick = handleClick;
}

3. 检测Canvas 2D支持

function supports2DCanvas() {
  const canvas = document.createElement('canvas');
  // 同时检查getContext方法存在，且能获取2D上下文
  return !!(canvas.getContext && canvas.getContext('2d'));
}

为什么特性检测更靠谱 #

• 避免UA字符串的不可靠性：UA可以被用户伪造，浏览器版本迭代也会导致UA格式变化，依赖它很容易出现误判。
• 精准适配当前环境：同一浏览器的不同版本特性支持差异极大，特性检测能直接判断当前运行环境是否满足需求。
• 灵活降级：可以根据特性支持情况优雅降级，保证代码在更多环境下正常运行。

注意事项 #

有些浏览器可能会存在“假特性”——即API存在但实现不完整或有bug，这时候需要更细致的检测逻辑（比如上面Canvas的例子，不仅检查方法存在，还要验证能否获取有效上下文）。

内容的提问来源于stack exchange，提问作者Mesut10