2023年如何用JavaScript检测用户浏览器（Chrome、Firefox等）

首先明确：不推荐直接检测浏览器品牌/版本，大部分场景下，你真正需要的是检测浏览器是否支持某个特定的API或特性（即「特征检测」），这比硬编码浏览器判断更健壮，也符合现代前端最佳实践。

优先选择：特征检测 #

比如你需要判断是否支持某个API，直接检查该API是否存在即可：

// 检测是否支持Intersection Observer
if ('IntersectionObserver' in window) {
  // 执行对应逻辑
} else {
  // 降级处理
}

// 检测是否支持CSS Grid
if (CSS.supports('display', 'grid')) {
  // 使用Grid布局
} else {
  // 回退到Flex或其他布局
}

如果确实需要识别浏览器（比如统计需求、针对特定浏览器的兼容修复），可以用以下更可靠的方法替代navigator.userAgent：

方法1：利用navigator.vendor #

这个字段比userAgent更稳定，不同浏览器的返回值差异明显：

// 检测Chrome/Chromium内核浏览器（包括Edge、Opera等）
const isChromiumBased = navigator.vendor === 'Google Inc.';

// 检测Safari
const isSafari = navigator.vendor === 'Apple Computer, Inc.';

// 检测Firefox
const isFirefox = navigator.vendor === '';

方法2：检查浏览器特有全局对象 #

部分浏览器有独有的全局标识，可以用来判断：

// 检测Firefox
const isFirefox = typeof InstallTrigger !== 'undefined';

// 检测Safari
const isSafari = typeof safari !== 'undefined';

// 检测旧版Edge（非Chromium内核）
const isOldEdge = typeof MSStream !== 'undefined';

方法3：使用navigator.userAgentData（现代浏览器推荐） #

这是浏览器提供的替代navigator.userAgent的结构化API，返回更可靠的品牌、版本、平台信息，目前Chromium内核浏览器（Chrome、Edge、Opera等）已支持：

if (navigator.userAgentData) {
  const { brands } = navigator.userAgentData;
  
  const isChrome = brands.some(item => item.brand === 'Google Chrome');
  const isEdge = brands.some(item => item.brand === 'Microsoft Edge');
  const isFirefox = brands.some(item => item.brand === 'Firefox');
  
  console.log(`是否为Chrome：${isChrome}`);
} else {
  // 降级到其他检测方法
}

注意事项 #

• 所有浏览器检测方法都不是100%可靠的，浏览器可能会修改这些标识（比如隐私保护机制），所以尽量优先用特征检测。
• 不要依赖浏览器检测做核心功能逻辑，仅用于统计或非关键的兼容修复。

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