HTML怎么做浏览器类型检测_html检测浏览器类型版本方法【必看】-html教程-PHP中文网

结论：禁用 navigator.useragent 做浏览器检测，应改用特性检测；ua 易伪造、趋同且被简化，匹配逻辑极易误判，仅适用于降级提示等非关键场景。

html怎么做浏览器类型检测_html检测浏览器类型版本方法【必看】

直接说结论：别用 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: '' };
}