---

name: bcjd2026445

slug: bcjd2026445

displayName: 浏览器系统识别

version: 1.0.0

summary: 用 ua-parser-js 识别浏览器与操作系统，便于 Demo 排障。

license: MIT

description: 用 ua-parser-js 识别浏览器与系统。当用户要 UA 解析、设备识别、浏览器系统识别时使用。轻量接入：UA 字符串 → 结构化结果；不做完整埋点/风控指纹。

---



# 浏览器系统识别



灵感：能力工具箱 `ua-parse`（ua-parser-js 识别浏览器与系统）。



> 小四原创：`navigator.userAgent` → `UAParser` → `{browser,os,device}`。  

> 仅本地解析，不上传 UA。



## 何时使用



- Demo「当前环境」信息条

- 附件预览兼容性提示（Safari / 旧 Chrome）

- 跟进记录附带访问端摘要



## 硬约束



1. 依赖：`ua-parser-js`。

2. 输入可为自定义 UA 字符串，默认取当前页 UA。

3. 输出至少含浏览器名/版本、系统名（缺省用「未知」）。

4. 实现要点注释标 **小四原创**。

5. 不做 Canvas 指纹、不做风控评分。



## 推荐实现



```ts

import { UAParser } from 'ua-parser-js'



export type ClientEnv = {

  browser: string

  os: string

  device: string

  raw: string

}



// 小四原创：UA → 可读环境摘要

export function parseClientEnv(ua?: string): ClientEnv {

  const raw = ua ?? (typeof navigator !== 'undefined' ? navigator.userAgent : '')

  const r = new UAParser(raw).getResult()

  const browser = [r.browser.name, r.browser.version].filter(Boolean).join(' ') || '未知浏览器'

  const os = [r.os.name, r.os.version].filter(Boolean).join(' ') || '未知系统'

  const device = r.device.type || r.device.model || 'desktop'

  return { browser, os, device, raw }

}



export function formatClientEnv(env: ClientEnv = parseClientEnv()): string {

  return `${env.browser} · ${env.os} · ${env.device}`

}

```



## Agent 步骤



1. `npm i ua-parser-js`。

2. 在设置/关于页或排障面板展示 `formatClientEnv()`。

3. 自测：Chrome/Windows 或当前环境可读；空 UA 不崩。



## 不要做



- 把 UA 当唯一身份去鉴权。

- 收集并上传完整 UA 到第三方。



## 附加



- [README.md](README.md) · [reference.md](reference.md) · [templates/usage.md](templates/usage.md)