纯前端如何判断用户访问设备以及浏览器？

面试导航是一个专注于前、后端技术学习和面试准备的免费学习平台，提供系统化的技术栈学习，深入讲解每个知识点的核心原理，帮助开发者构建全面的技术体系。平台还收录了大量真实的校招与社招面经，帮助你快速掌握面试技巧，提升求职竞争力。如果你想加入我们的交流群，欢迎通过微信联系：yunmz777。

记录 User Agent 信息可以帮助我们了解用户使用的设备和浏览器 ，从而优化页面兼容性和用户体验。同时，它对用户行为分析和统计 也很重要，能指导产品决策。最后，在某些场景下，它还能用于安全审计或识别异常请求。

🧭 一、什么是 User Agent（用户代理）？

User Agent（简称 UA）是客户端发送给服务器的一段字符串，用于标识自己是什么浏览器、操作系统、设备等信息。

每次浏览器（或其他 HTTP 客户端）发起请求时，都会在 HTTP 请求头中包含一个 User-Agent 字段。

如下所示：

scss 复制代码

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

这个字符串并没有统一标准，但一般包括如下几部分：

浏览器厂商（如 Mozilla）
操作系统信息（如 Windows NT 10.0）
CPU 架构（如 x64）
渲染引擎（如 AppleWebKit）
浏览器名和版本（如 Chrome/123）
兼容性信息（如 Safari/537）

记录 User Agent 信息可以用于前端适配页面展示、后端统计用户设备分布、安全防护识别异常请求，以及帮助开发者调试分析用户环境。

📦 二、什么是 `ua-parser-js`？

ua-parser-js 是一个 JavaScript 库，用来解析 User Agent 字符串，提取其中的有用信息。它是轻量级的、无依赖的，可运行在浏览器和 Node.js 中。

你可以通过它快速获取浏览器名称和版本、操作系统信息、设备类型（如手机、平板、桌面）以及渲染引擎（如 WebKit 或 Blink）等关键数据。

🚀 三、安装与引入

在前端或 Node.js 项目中，先安装：

bash 复制代码

npm install ua-parser-js

然后根据你的项目类型选择引入方式：

ES 模块：

js 复制代码

import UAParser from "ua-parser-js";

CommonJS：

js 复制代码

const UAParser = require("ua-parser-js");

如果只是简单在网页中使用，可以直接通过 CDN 引入：

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@latest/src/ua-parser.min.js"></script>

搞定！随时可以开始解析 UA 啦～

首先，你需要拿到用户的 User Agent 字符串：

js 复制代码

const uaString = navigator.userAgent; // 前端浏览器环境

然后用 UAParser 来解析它：

javascript 复制代码

const parser = new UAParser(uaString); // 把 UA 字符串传进去
const result = parser.getResult();
console.log(result);

输出结果如下所示（示例，仅供参考）：

json 复制代码

{
  "ua": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)...",
  "browser": {
    "name": "Chrome",
    "version": "123.0.0.0"
  },
  "engine": {
    "name": "Blink",
    "version": "123.0.0.0"
  },
  "os": {
    "name": "Windows",
    "version": "10"
  },
  "device": {
    "model": undefined,
    "type": undefined,
    "vendor": undefined
  },
  "cpu": {
    "architecture": "amd64"
  }
}

那我们如何提取你想要的信息

javascript 复制代码

const browser = parser.getBrowser();
console.log(browser.name); // Chrome
console.log(browser.version); // 123.0.0.0

const os = parser.getOS();
console.log(os.name); // Windows
console.log(os.version); // 10

就这么简单！只需要几行代码，你就能轻松读取浏览器、系统、设备等信息，适用于各种分析、适配或调试场景。需要我再加点服务端的使用示例吗？

总结

最后我们展示一个 demo，我们先在浏览器上面获取到 ua：

之后我们再通过 npx 来执行：

bash 复制代码

npx ua-parser-js 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36'

最终输出结果如下图所示；

User Agent 是客户端在请求网页时发送的一段标识信息，用于描述它所使用的浏览器、操作系统、设备类型等。 虽然格式没有严格标准，但大多数 UA 都遵循一定结构，包含浏览器内核、系统平台和版本号等关键数据。通过解析 UA，可以帮助我们实现页面适配、用户分析、安全防护和调试支持。不过需要注意，UA 是可以伪造的，因此不能完全依赖它进行身份验证。

纯前端如何判断用户访问设备以及浏览器？

🧭 一、什么是 User Agent（用户代理）？

📦 二、什么是 ua-parser-js？

🚀 三、安装与引入

总结

📦 二、什么是 `ua-parser-js`？