结论：禁用 navigator.userAgent 做浏览器检测，应改用特性检测；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/→ SafariChrome/+!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 事件不触发），所以关键路径上仍需手动验证行为，不能只查定义。
