LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【WEB开发】JavaScript纯前端如何判断用户访问设备以及浏览器?

admin
2025年8月28日 8:3 本文热度 72

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

🧭 一、什么是 User Agent(用户代理)?

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

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

如下所示:

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 项目中,先安装:

npm install ua-parser-js

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

ES 模块:

import UAParser from "ua-parser-js";

CommonJS:

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

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

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

搞定!随时可以开始解析 UA 啦~

首先,你需要拿到用户的 User Agent 字符串:

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

然后用 UAParser 来解析它:

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

输出结果如下所示(示例,仅供参考):

{
  "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"
  }
}

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

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 来执行:

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 是可以伪造的,因此不能完全依赖它进行身份验证。


阅读原文:原文链接


该文章在 2025/8/28 13:04:12 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved