如何检测HTML中用户浏览器类型和版本

本文深入剖析了在HTML中识别用户浏览器类型和版本的常见误区与安全实践，强调应摒弃简单粗暴的userAgent字符串匹配（如includes或正则误判），转而优先采用可靠、面向未来的功能检测；仅当确有品牌识别需求（如埋点统计或兼容性提示）时，才谨慎结合多级正则优先级匹配（Edge→Firefox→Chrome→Safari）与navigator.vendor/product等更难伪造的辅助字段进行交叉验证，从而在复杂多变的浏览器生态（如Chromium双核、iOS精简UA、伪装UA等）中实现真正稳健的识别逻辑。

直接解析 navigator.userAgent 字符串能拿到浏览器类型和版本，但结果不可信——它可被用户、插件、WebView 甚至企业内网策略随意修改。真正该做的，是优先用功能检测（feature detection），仅在必须识别品牌场景（如埋点统计、降级提示）时，才谨慎解析 UA，并务必交叉验证。

为什么不能只靠 userAgent.includes('Chrome')

Chromium 内核的浏览器（Edge、Opera、国产双核）UA 里都带 Chrome/；Safari 的 UA 可能不含 Safari/（尤其 iOS 17+ 精简 UA 模式）；Firefox 的 rv:126.0 才是真实版本，Firefox/126.0 可能是伪装值。手写 includes 或简单 indexOf 判断，大概率误判。

无序列表呈现常见陷阱：

• ua.indexOf('Chrome') > -1 → 会把 Edge、360 极速、QQ 浏览器都当成 Chrome
• ua.match(/Firefox\/(\d+)/) → 忽略 rv: 导致 Firefox 版本取错
• ua.includes('Safari') → iOS 17+ Safari 精简 UA 可能完全不出现 Safari 字样
• 依赖 MSIE 判断 IE → IE11 和 Edge 已弃用该标识，改用 Trident 或 Edg/

怎么安全提取 Chrome / Edge / Firefox / Safari 的版本号

必须按优先级顺序匹配，避免被干扰字段捕获。例如 Edge 必须先于 Chrome 匹配，否则 Edg/125.0 会被 Chrome/ 正则提前截断。

实操建议：

• 先匹配 Edg\/(\d+\.\d+) → Edge 专属，版本紧随其后
• 再匹配 Firefox\/(\d+\.\d+).*?rv:(\d+\.\d+) → 优先取 rv: 后的数字
• 然后匹配 Chrome\/(\d+\.\d+)(?!\D*Edg\/) → 排除后面紧跟 Edg/ 的情况
• 最后匹配 Version\/(\d+\.\d+).*?Safari\/ → Safari 的 Version/ 在 Safari/ 前，且不能出现在 Chrome/Edge UA 中

示例片段（不依赖库）：

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 chrome = ua.match(/Chrome\/(\d+\.\d+)(?!\D*Edg\/)/);
  if (chrome) return { name: 'Chrome', version: chrome[1] };
  
  const safari = ua.match(/Version\/(\d+\.\d+).*?Safari\/(\d+\.\d+)/);
  if (safari) return { name: 'Safari', version: safari[1] };
  
  return null;
}

用 navigator.vendor 和 navigator.product 辅助验证

这两个字段比 userAgent 更难伪造，适合交叉验证。比如 navigator.vendor === 'Apple Computer, Inc.' 基本可确认是 Safari；navigator.product === 'Gecko' 且 UA 含 Firefox/，基本可锁定 Firefox。

注意点：

• navigator.vendor 在 Chrome / Edge / Safari 中稳定，Firefox 返回空字符串（不支持）
• navigator.product 在 Firefox 中为 Gecko，其余主流浏览器基本都是 WebKit（包括 Chrome、Safari、Edge）
• 不要单独依赖 product === 'Gecko' —— 极少数旧环境 Chrome 曾短暂返回过该值

真正该做的是功能检测，不是浏览器检测

95% 的兼容性问题其实不关心「是不是 Chrome」，而是「能不能用 ResizeObserver」或「scrollTo({behavior: 'smooth'}) 是否生效」。这类判断既可靠又面向未来。

典型例子：

• 平滑滚动：'scrollBehavior' in document.documentElement.style
• 触控支持：'ontouchstart' in window 或 navigator.maxTouchPoints > 0
• 地理定位：'geolocation' in navigator
• WebP 图片：document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0

复杂点在于：有些功能（如 userAgentData）需要 HTTPS + 用户许可，且 Firefox 不支持；而纯 UA 解析在 Electron、WebView、精简 UA 场景下极易失效。别省那几行代码去写正则，先想清楚——你到底需要什么行为，而不是什么名字。

到这里，我们也就讲完了《如何检测HTML中用户浏览器类型和版本》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！