浏览器版本检测方法

问题

检测浏览器版本有哪些方式？

解答

1. User-Agent 字符串解析

// 获取 User-Agent 字符串
const ua = navigator.userAgent;

// 检测常见浏览器
function getBrowserInfo() {
  const ua = navigator.userAgent;
  
  // Chrome (需要排除 Edge 和 Opera)
  if (/Chrome/.test(ua) && !/Edg|OPR/.test(ua)) {
    const match = ua.match(/Chrome\/(\d+)/);
    return { name: 'Chrome', version: match ? match[1] : 'unknown' };
  }
  
  // Firefox
  if (/Firefox/.test(ua)) {
    const match = ua.match(/Firefox\/(\d+)/);
    return { name: 'Firefox', version: match ? match[1] : 'unknown' };
  }
  
  // Safari (需要排除 Chrome)
  if (/Safari/.test(ua) && !/Chrome/.test(ua)) {
    const match = ua.match(/Version\/(\d+)/);
    return { name: 'Safari', version: match ? match[1] : 'unknown' };
  }
  
  // Edge (Chromium 内核)
  if (/Edg/.test(ua)) {
    const match = ua.match(/Edg\/(\d+)/);
    return { name: 'Edge', version: match ? match[1] : 'unknown' };
  }
  
  return { name: 'unknown', version: 'unknown' };
}

console.log(getBrowserInfo());
// { name: 'Chrome', version: '120' }

2. 特性检测

// 通过浏览器特有 API 判断
function detectByFeature() {
  // Chrome 特有
  if (window.chrome && window.chrome.runtime) {
    return 'Chrome 或 Chromium 内核';
  }
  
  // Firefox 特有
  if (typeof InstallTrigger !== 'undefined') {
    return 'Firefox';
  }
  
  // Safari 特有
  if (/constructor/i.test(window.HTMLElement)) {
    return 'Safari';
  }
  
  // IE 特有
  if (/*@cc_on!@*/false || document.documentMode) {
    return 'IE';
  }
  
  return 'unknown';
}

3. 使用第三方库

// 使用 UAParser.js
import UAParser from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

console.log(result.browser);
// { name: 'Chrome', version: '120.0.0.0', major: '120' }

console.log(result.os);
// { name: 'Windows', version: '10' }

console.log(result.device);
// { model: undefined, type: undefined, vendor: undefined }

// 使用 Bowser
import Bowser from 'bowser';

const browser = Bowser.getParser(navigator.userAgent);

console.log(browser.getBrowserName());    // 'Chrome'
console.log(browser.getBrowserVersion()); // '120.0.0.0'

// 条件判断
const isValidBrowser = browser.satisfies({
  chrome: '>=90',
  firefox: '>=80',
  safari: '>=14'
});

4. navigator 其他属性

// 厂商信息
console.log(navigator.vendor);
// Chrome: 'Google Inc.'
// Firefox: ''
// Safari: 'Apple Computer, Inc.'

// 平台信息
console.log(navigator.platform);
// 'Win32', 'MacIntel', 'Linux x86_64'

// 新版 API (部分浏览器支持)
if (navigator.userAgentData) {
  console.log(navigator.userAgentData.brands);
  // [{ brand: 'Google Chrome', version: '120' }, ...]
  
  // 获取详细信息
  navigator.userAgentData.getHighEntropyValues([
    'platform',
    'platformVersion',
    'architecture'
  ]).then(data => console.log(data));
}

关键点

• User-Agent 不可靠：可被修改，且各浏览器格式混乱，需要注意判断顺序
• 特性检测优先：判断功能是否可用比判断浏览器类型更实用
• 推荐第三方库：UAParser.js、Bowser 等库处理了各种边界情况
• userAgentData 是趋势：新的 API 更结构化，但兼容性有限
• 避免过度依赖：浏览器检测应作为降级方案，而非主要逻辑