HTML如何检测浏览器类型及版本【必看】

本文直击前端开发中一个长期被误用的痛点：别再依赖不可靠的 `navigator.userAgent` 进行浏览器类型与版本检测！由于现代浏览器 UA 字符串高度趋同、可随意伪造、主动简化（如 Chrome 120+ 和 iOS 17+ Safari 默认启用 UA reduction），任何基于字符串匹配的判断都极易误判——Edge 被认成 Chrome、Safari 被误标为 Firefox、国产双核浏览器更让正则崩溃。文章不仅犀利指出问题根源，还给出“勉强可用”的 UA 解析逻辑和更稳健的 `navigator.vendor`/`navigator.product` 辅助方案，但最终强调：真正该做的不是问“它叫什么”，而是问“它能不能做”——用原生特性检测（如 `'ResizeObserver' in window` 或 `CSS.supports()`）替代 UA 判断，才能写出健壮、面向未来、不随浏览器升级而失效的代码。

直接说结论：别用 navigator.userAgent 做浏览器类型检测，除非你明确知道它只是用于降级提示、统计或调试，且能接受误判。现代浏览器 UA 字符串高度趋同、可伪造、被主动简化（Chrome 120+、iOS 17+ Safari 默认启用 UA reduction），靠字符串匹配得出的“Chrome/Edge/Safari”本质是 UA 声称的身份，不是真实渲染行为。

navigator.userAgent 匹配为什么总出错

• Chrome 和 Edge 都带 Chrome/：Edge 从 79+ 起基于 Chromium，UA 里必然含 Chrome/125.0.0.0 和 Edg/125.0.0.0，只查 Chrome/ 就会把 Edge 当 Chrome
• Safari（iOS/macOS）也带 Chrome/：某些 iOS WebView 或旧版 Safari 会插入该字段，仅靠它无法区分
• Firefox 的 rv: 版本才是真版本：Firefox/126.0 可能是伪装值，rv:126.0 才在括号内，必须优先提取
• 国产双核浏览器硬塞关键词：360 极速、QQ 浏览器 UA 里同时含 Chrome/、Firefox/、QQBrowser/，顺序一变就匹配错

常见错误写法：

• ua.includes('Chrome') → 错，Edge/iOS Safari/360 都会中招
• ua.indexOf('Safari') > -1 && !ua.includes('Chrome') → 不够，得加 AppleWebKit/ 和 !Edg/ 双重确认

真正需要区分时，怎么写一个「勉强能用」的 UA 解析函数

这个函数只适用于必须展示“当前使用 Chrome”之类文案、或给灰度功能打标等非关键场景：

• 先匹配独占标识，按优先级顺序：
  Edg/ → Edge（EdgeHTML 已淘汰，所有新版 Edge 都含此）
  Firefox/ → Firefox（几乎不会被其他浏览器复用）
  Safari/ + AppleWebKit/ + !Edg/ + !Chrome/ → Safari
  Chrome/ + !Edg/ + !Safari/ → Chrome
• 版本号提取要对应匹配项：
  Edg/(\d+.\d+) 捕获 Edge 版本
  Firefox/(\d+.\d+).*?rv:(\d+.\d+) 优先取 rv: 后的组
  Chrome/(\d+.\d+) 提取 Chrome 版本（注意：iOS Chrome 的版本号是 Apple 强制伪造的，不可信）

示例逻辑（不推荐直接复制到生产）：

function getBrowser() {
  const ua = navigator.userAgent;
  const edge = ua.match(/Edg\/(\d+\.\d+)/);
  if (edge) return { name: 'Edge', version: edge[1] };
  const firefox = ua.match(/Firefox\/(\d+\.\d+).*?rv:(\d+\.\d+)/) || ua.match(/Firefox\/(\d+\.\d+)/);
  if (firefox) return { name: 'Firefox', version: firefox[2] || firefox[1] };
  const safari = ua.match(/Version\/(\d+\.\d+).*?Safari\//) && /AppleWebKit/.test(ua) && !/Edg|Chrome/.test(ua);
  if (safari) return { name: 'Safari', version: safari[1] };
  const chrome = ua.match(/Chrome\/(\d+\.\d+)(?!\D*Edg\/)(?!\D*Safari\/)/);
  if (chrome) return { name: 'Chrome', version: chrome[1] };
  return { name: 'unknown', version: '' };
}

更可靠的做法：用 navigator.vendor 和 navigator.product 辅助交叉验证

这两个字段比 userAgent 更难伪造，且在多数现代浏览器中稳定存在：

• navigator.vendor === 'Google Inc.' → 大概率是 Chrome（但 Electron 应用可能伪造）
• navigator.vendor === 'Apple Computer, Inc.' → 基本锁定 Safari（iOS/macOS）
• navigator.vendor === 'Microsoft Corporation' → Edge（注意：旧版 IE 返回空字符串）
• navigator.product === 'Gecko' → Firefox（但极少数老 Chrome 曾短暂返回过，已基本可忽略）
• navigator.product === 'WebKit' → Safari / Chrome / Edge（不能单独用，需结合 vendor）

实操建议：

• 先看 navigator.vendor，再用 userAgent 中的关键词做二次确认
• 不要单独依赖 product，它只是渲染引擎标识，不是浏览器本身
• 若 navigator.vendor 为空（如某些 WebView 或隐私模式），立刻 fallback 到特性检测

最终提醒：真正该检测的是「能不能用」，不是「是不是」

你真正关心的从来不是“用户用的是不是 Chrome”，而是：

• 'ResizeObserver' in window → 能不能监听元素尺寸变化
• 'scrollBehavior' in document.documentElement.style → 支持不支持平滑滚动
• CSS.supports('aspect-ratio', '1/1') → CSS aspect-ratio 是否生效

这些检测不依赖 UA，不被伪造，不随版本更新失效。而所有基于 UA 的判断，都会在某次浏览器升级后突然崩掉——比如 Chrome 126 开始默认隐藏操作系统字段，你的 ua.includes('Windows') 就永远返回 false。

复杂点在于：API 存在 ≠ 可用（如 Safari 16.0–16.3 的 dialog.showModal() 存在但 close 事件不触发），所以关键路径上仍需手动验证行为，不能只查定义。

好了，本文到此结束，带大家了解了《HTML如何检测浏览器类型及版本【必看】》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！