应优先使用功能检测而非解析useragent，仅在必要时谨慎解析并交叉验证；chrome/edge/firefox/safari版本提取需按优先级顺序正则匹配，并结合navigator.vendor/product辅助验证。
直接解析 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 场景下极易失效。别省那几行代码去写正则，先想清楚——你到底需要什么行为，而不是什么名字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
