浏览器版本检测

问题

如何检测浏览器版本？

解答

检测浏览器版本有两种方式：

方式一：userAgent 检测

通过检测 window.navigator.userAgent 的值来判断浏览器类型和版本。

const ua = window.navigator.userAgent;

// 检测 Chrome
if (ua.indexOf('Chrome') > -1) {
  console.log('Chrome 浏览器');
}

// 检测 Firefox
if (ua.indexOf('Firefox') > -1) {
  console.log('Firefox 浏览器');
}

// 检测 Safari
if (ua.indexOf('Safari') > -1 && ua.indexOf('Chrome') === -1) {
  console.log('Safari 浏览器');
}

这种方式不可靠，因为 userAgent 可以被改写。早期浏览器如 IE 会伪装 userAgent 为 Mozilla 来躲过服务器检测。

方式二：功能检测

根据浏览器独有的特性来判断，更加可靠。

// 检测 IE（IE11 以下）
if (window.ActiveXObject || 'ActiveXObject' in window) {
  console.log('IE 浏览器');
}

// 检测是否支持某个特性
if ('IntersectionObserver' in window) {
  console.log('支持 IntersectionObserver API');
}

// 检测 CSS 属性支持
if ('cm8n4' in document.documentElement.style) {
  console.log('支持 CSS Grid');
}

关键点

• userAgent 检测简单但不可靠，容易被伪造
• 功能检测更可靠，通过检测浏览器独有特性来判断
• 推荐使用功能检测而非浏览器检测，关注功能而非浏览器类型
• 现代开发中应优先考虑渐进增强和优雅降级策略