如何用JavaScript检测浏览器类型

在前端开发中，我们偶尔会遇到需要针对特定浏览器做兼容处理或者功能适配的场景，这时候就需要通过JavaScript来检测用户当前使用的浏览器类型。不过需要注意的是，现代浏览器检测更推荐基于特性检测而非单纯的浏览器类型判断，但在部分特殊场景下，浏览器类型检测依然有它的实用价值。

常见浏览器检测思路

浏览器的相关信息通常可以通过navigator.userAgent属性获取，这个属性会返回包含浏览器类型、版本、操作系统等信息的字符串。我们可以通过解析这个字符串，匹配不同浏览器的特征标识来判断浏览器类型。

常见的浏览器特征标识如下：

• Chrome浏览器：userAgent中包含"Chrome"，但没有"Edge"和"OPR"
• Edge浏览器：userAgent中包含"Edg/"（新版Chromium内核Edge）或者"Edge/"（旧版Edge）
• Firefox浏览器：userAgent中包含"Firefox"
• Safari浏览器：userAgent中包含"Safari"，但没有"Chrome"
• Opera浏览器：userAgent中包含"OPR/"
• IE浏览器：userAgent中包含"Trident"，或者可以通过ActiveXObject特性判断

实践示例：JavaScript检测浏览器类型

下面是一个完整的检测函数，覆盖了主流浏览器的判断逻辑：

/**
 * 检测当前浏览器类型
 * @returns {string} 浏览器类型名称，如 'Chrome'、'Edge'、'Firefox' 等
 */
function detectBrowser() {
  const userAgent = navigator.userAgent.toLowerCase();
  
  // 检测Opera浏览器
  if (userAgent.indexOf('opr/') > -1) {
    return 'Opera';
  }
  
  // 检测Edge浏览器（新版Chromium内核）
  if (userAgent.indexOf('edg/') > -1) {
    return 'Edge (Chromium)';
  }
  
  // 检测旧版Edge浏览器
  if (userAgent.indexOf('edge/') > -1) {
    return 'Edge (Legacy)';
  }
  
  // 检测Chrome浏览器，需排除被其他浏览器包含的Chrome标识
  if (userAgent.indexOf('chrome') > -1 && userAgent.indexOf('safari') > -1) {
    // 排除Safari，因为Safari的userAgent也包含chrome相关标识（早期版本）
    if (userAgent.indexOf('safari') > -1 && userAgent.indexOf('chrome') === -1) {
      return 'Safari';
    }
    return 'Chrome';
  }
  
  // 检测Firefox浏览器
  if (userAgent.indexOf('firefox') > -1) {
    return 'Firefox';
  }
  
  // 检测Safari浏览器
  if (userAgent.indexOf('safari') > -1) {
    return 'Safari';
  }
  
  // 检测IE浏览器
  if (userAgent.indexOf('trident') > -1 || !!document.documentMode) {
    return 'IE';
  }
  
  // 未识别的浏览器
  return 'Unknown Browser';
}

// 调用函数并打印结果
const browserType = detectBrowser();
console.log('当前浏览器类型：', browserType);

上面的代码首先获取小写的userAgent字符串，然后按照优先级依次匹配不同浏览器的特征：先判断小众的Opera、Edge，再判断Chrome和Firefox，最后处理Safari和IE。这样做的目的是避免特征标识被其他浏览器包含导致判断错误，比如Safari的userAgent中曾经包含Chrome相关的标识，需要额外排除。

注意事项

虽然上面的方法可以实现浏览器类型检测，但实际开发中需要注意几个问题：

• userAgent字符串是可以被用户或者浏览器插件修改的，所以检测结果不一定100%准确
• 现代前端开发更推荐特性检测，比如需要判断浏览器是否支持某个API，直接检测该API是否存在，而不是判断浏览器类型，例如检测是否支持fetch可以直接写 if (typeof fetch === 'function')
• 随着浏览器版本更新，userAgent的格式可能会变化，所以如果长期使用这个检测逻辑，需要定期验证适配性

如果只是需要针对特定浏览器做兼容，也可以结合条件注释（仅IE支持）或者CSS Hack等方式，不一定完全依赖JavaScript检测。

JavaScript检测浏览器类型navigator.userAgent浏览器兼容特性检测前端开发 本作品最后修改时间：2026-05-23 23:36:28