直接读取 navigator.userAgent 字符串可获取浏览器信息，但它非结构化且易被伪造或简化；应优先用功能检测，必要时用 ua-parser-js 等库解析，避免手写正则误判。
怎么用 navigator.userAgent 拿到浏览器信息
直接读 navigator.useragent 字符串就行，它在所有现代浏览器里都可用，包括移动端 webview。但别指望它返回结构化数据——它就是一长串带空格和斜杠的文本，比如 mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/124.0.0.0 safari/537.36。
常见错误是直接用 .includes('Chrome') 判断 Chrome：一旦用户改了 UA（比如开发者工具里切到 iPhone 模式），或者某些国产双核浏览器（如 QQ 浏览器）同时报 Chrome 和 QQBrowser，结果就错。
- 优先匹配更具体的子串，比如
QQBrowser/比Chrome更可靠 - 注意大小写：Safari 的 UA 里是
Safari/，但可能不含Chrome；而 Edge 从 79+ 开始也带Chrome/，必须靠Edg/或Edge/识别 - 移动端 WebView 常省略品牌名，只留
WebKit和Mobile，得结合navigator.platform或navigator.maxTouchPoints辅助判断
为什么不能只靠 userAgent 做功能适配
因为 UA 可被轻易伪造、截断或省略。iOS 17+ 的 Safari 允许网站请求“精简 UA”，返回的字符串可能不包含 Version/ 或具体版本号；Chrome 120+ 也默认启用 UA reduction，userAgent 里不再暴露操作系统细节。
更麻烦的是，很多企业内网环境或 Electron 应用会主动清空或重写 navigator.userAgent，导致你拿到空字符串或 Mozilla/5.0 (X11) 这类无意义值。
- 功能检测（feature detection）永远优于 UA 检测：用
'ontouchstart' in window判断触控，而不是查Mobile - 需要精确版本号时，优先查
navigator.userAgentData（需 HTTPS + 用户许可），但兼容性差（Chrome 101+，Firefox 不支持） - 服务端 UA 解析更不可靠：CDN 或代理可能修改、缓存 UA，Node.js 里拿不到真实客户端 UA
userAgent 里哪些字段还算有点参考价值
不是所有字段都失效。目前较稳定的识别锚点有这几个：
立即学习“前端免费学习笔记（深入）”；
-
Edg/或Edge/：Edge 浏览器专属，版本号紧随其后，如Edg/124.0.0.0 -
Firefox/：Firefox 仍保持完整格式，且不混用 WebKit 关键词 -
OPR/：Opera Legacy（基于 Blink 的旧版），新版 Opera 已改用Edg/ -
iPad; CPU OS或iPhone; CPU iPhone OS：iOS 设备标识仍较稳定，但注意 iPadOS 13+ 后 UA 和 macOS Safari 趋同
别信 Trident/（IE）或 MSIE：IE 已停更，且 Edge 早期兼容模式下也可能残留，实际已无意义。
真要解析 UA，推荐轻量方案而非正则硬刚
手写正则容易漏掉边界情况（比如 UA 换行、空格数量不固定、括号嵌套）。用现成小库反而更稳，比如 ua-parser-js（仅 4KB），它把解析逻辑封装好了，返回对象：{ browser: { name: 'Chrome', version: '124.0.0.0' }, os: { name: 'Windows' } }。
如果你不想引入依赖，至少把核心提取逻辑抽成函数，别散落在各处：
function getBrowser() {
const ua = navigator.userAgent;
if (/Edg\//.test(ua)) return 'Edge';
if (/Firefox\//.test(ua)) return 'Firefox';
if (/Chrome\//.test(ua) && !/Edg\//.test(ua)) return 'Chrome';
if (/Safari\//.test(ua) && /Apple/.test(ua)) return 'Safari';
return 'Unknown';
}
注意：这个函数没处理版本号提取，也未覆盖微信内置浏览器（MicroMessenger/）、飞书（Lark/）等国内常用容器，它们往往需要单独判断。
UA 解析最复杂的点不在语法，而在语义模糊——同一个字符串可能对应多个真实环境，而同一个环境又可能输出多个 UA。能不动手就别硬解，能用 CSS @supports 或 JS API 就别查 UA。
