使用 ua-parser-js 获取用户的浏览器、操作系统、设备类型等信息

什么是 ua-parser-js？

ua-parser-js 是一个轻量级的 JavaScript 库，旨在解析用户代理（User-Agent）字符串，从中提取出浏览器、操作系统、设备类型、CPU 架构等信息。它支持在浏览器（客户端）和 Node.js（服务端）环境中运行，适用于多种 Web 开发场景。

ua-parser-js GitHub地址：https://github.com/faisalman/ua-parser-js

ua-parser-js 官网：https://docs.uaparser.dev/

ua-parser-js 主要特点

• 全面的信息提取：能够识别浏览器名称和版本、操作系统名称和版本、设备类型（如手机、平板、桌面）、设备厂商、CPU 架构等。
• 轻量级：库的体积小，适合对性能有要求的项目。
• 无依赖：纯 JavaScript 编写，无需其他依赖，易于集成。
• 支持扩展：可以通过自定义正则表达式扩展识别能力。

如何安装 ua-parser-js？

你可以通过多种方式安装和使用 ua-parser-js：

使用 npm 安装（适用于 Node.js 或现代前端项目）

npm install ua-parser-js

然后在你的 JavaScript 文件中引入：

import UAParser from 'ua-parser-js';

在 HTML 中直接引入（适用于传统网页）

可以通过 CDN 直接在 HTML 文件中引入： html 复制 编辑

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js/dist/ua-parser.min.js"></script>
<script>
  const parser = new UAParser();
  const result = parser.getResult();
  console.log(result);
</script>

ua-parser-js 使用示例

以下是使用 ua-parser-js 获取用户操作系统和浏览器信息的代码示例：

import UAParser from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

console.log('浏览器名称：', result.browser.name);
console.log('浏览器版本：', result.browser.version);
console.log('操作系统：', result.os.name);
console.log('操作系统版本：', result.os.version);
console.log('设备类型：', result.device.type);
console.log('设备厂商：', result.device.vendor);
console.log('设备型号：', result.device.model);
console.log('CPU 架构：', result.cpu.architecture);

如果你想解析特定的用户代理字符串，可以使用 setUA 方法：

parser.setUA('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36');
const customResult = parser.getResult();
console.log(customResult);

ua-parser-js 应用场景

• 内容定制：根据用户的设备类型或操作系统，提供定制化的内容或布局。
• 统计分析：收集用户的浏览器和设备信息，用于数据分析和产品优化。
• 功能兼容性处理：根据用户的浏览器版本，决定是否启用某些特性或提供兼容性提示。

ua-parser-js 是一个功能强大且易于使用的用户代理解析库，适用于各种 Web 开发场景。无论是进行内容定制、数据分析，还是处理兼容性问题，它都能为你提供可靠的支持。通过简单的集成，你就可以获取用户的详细信息，提升应用的智能化和用户体验。