Navigator.userAgent属性详解

来源：聚合数据类型：技术文章发布：2025-07-28 16:47:57

在 Web 开发中，获取客户端信息是实现浏览器兼容性处理、设备识别、日志统计等功能的重要手段。其中，navigator.userAgent 是 JavaScript 中用于获取浏览器用户代理字符串的属性，它提供了一种简便的方式用于识别当前运行的浏览器类型、操作系统、设备信息等。

虽然 userAgent 信息并非百分之百准确，也可能被修改，但它依然是前端开发中判断环境、适配设备的重要依据之一。本文将围绕 navigator.userAgent 的定义、作用、使用方式、结构解析、应用场景以及使用注意事项进行详细讲解，帮助开发者全面掌握这一基础但非常实用的浏览器信息获取方式。

一、navigator.userAgent 的基本定义与作用

navigator.userAgent 是 window.navigator 对象的一个属性，它返回一个字符串，描述了当前浏览器和操作系统的信息。

基本作用

获取当前浏览器的名称、版本；

判断用户使用的操作系统（如 Windows、macOS、Android、iOS）；

识别设备类型（如手机、平板、桌面）；

辅助实现浏览器兼容性处理；

在服务端或客户端实现设备适配逻辑。

示例：获取 userAgent 字符串

console.log(navigator.userAgent);

输出示例（不同浏览器不同）：

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

二、userAgent 字符串的结构与组成

尽管不同浏览器的 userAgent 字符串格式略有不同，但它们通常都遵循一个通用的结构：

基本结构说明

Mozilla/5.0：早期浏览器遗留信息，几乎所有浏览器都保留这个前缀；

平台信息：如 (Windows NT 10.0; Win64; x64) 表示 Windows 10 64位系统；

渲染引擎信息：如 AppleWebKit/537.36 表示使用 WebKit 渲染引擎；

浏览器名称与版本：如 Chrome/122.0.0.0 表示 Chrome 浏览器版本；

其他信息：可能包含设备型号、语言、浏览器标识等。

不同浏览器的 userAgent 示例

Chrome：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36Firefox：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:115.0) Gecko/20100101 Firefox/115.0Safari（iOS）：
Mozilla/5.0 (iPhone; CPU iPhone OS 17_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1Edge：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Edg/120.0.0.0 Chrome/120.0.0.0 Safari/537.36

通过解析这些字符串内容，可以提取出浏览器、操作系统、设备类型等信息。

三、userAgent 的使用方式与技巧

基本使用方式

在浏览器环境中，直接访问 navigator.userAgent 即可获取用户代理字符串：

const ua = navigator.userAgent;
console.log(ua);

识别浏览器类型

通过判断 userAgent 中是否包含特定关键字，可以识别当前浏览器：

if (/Chrome/.test(ua)) {
    console.log("你正在使用 Chrome 浏览器");
}
if (/Firefox/.test(ua)) {
    console.log("你正在使用 Firefox 浏览器");
}

识别操作系统

同样可以通过正则表达式判断操作系统类型：

if (/Windows/.test(ua)) {
    console.log("操作系统：Windows");
}
if (/Mac OS X/.test(ua)) {
    console.log("操作系统：macOS");
}
if (/Android/.test(ua)) {
    console.log("操作系统：Android");
}
if (/iPhone|iPad|iPod/.test(ua)) {
    console.log("操作系统：iOS");
}

识别设备类型（移动设备或桌面设备）

通过检测 userAgent 中的关键词，可以判断当前设备是否为移动设备：

function isMobile() {
    return /iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent);
}

识别浏览器版本

提取浏览器版本号可以用于判断功能支持情况：

const versionMatch = ua.match(/(opera|chrome|safari|firefox|msie|edge)\/?\s*(\d+)/i);
if (versionMatch) {
    const browser = versionMatch[1];
    const version = versionMatch[2];
    console.log(`浏览器：${browser}，版本：${version}`);
}