js 如何获取浏览器信息

月夜之吻

发布时间：2025-08-16 10:23:01

402人浏览过

来源于php中文网

原创

获取浏览器信息最直接的方式是使用navigator和window对象；2. navigator.useragent可获取包含浏览器、操作系统等信息的字符串，但解析复杂且易被伪装；3. navigator.platform返回操作系统平台信息，但可能在特定环境下不准确；4. navigator.online判断网络连接状态，但无法确定是否真正可访问互联网；5. window.innerwidth/innerheight和screen.width/height分别获取视口和屏幕尺寸，用于响应式设计；6. user-agent client hints（如navigator.useragentdata）提供更结构化、隐私友好的现代替代方案，但需服务器配合且兼容性仍在提升；7. 尽管特性检测优于浏览器检测，但在兼容性处理、用户统计、体验优化和错误排查中，获取浏览器信息仍有实际价值；8. useragent存在伪装、格式不统一、信息冗余或缺失等问题，准确性有限；9. 更可靠的替代方法包括window.matchmedia()用于媒体查询、特性检测判断api支持、navigator.connection获取网络质量、geolocation获取位置、设备传感器和webrtc api获取硬件信息；10. 综合使用多种api才能全面了解用户运行环境。因此，应优先采用特性检测和现代api，谨慎使用useragent解析，以提高准确性和可维护性。

js 如何获取浏览器信息

要在JavaScript里获取浏览器信息，最直接的方式就是利用浏览器内置的

navigator

和

window

对象。它们提供了访问当前运行环境、设备状态以及浏览器本身属性的接口，虽然有些老旧的API可能不再那么精准，但它们依然是基础。

解决方案

获取浏览器信息，我们主要围绕

navigator

和

window

这两个全局对象展开。

navigator

对象这是获取浏览器本身信息的核心。

navigator.userAgent
: 这是最常用也最复杂的一个。它是一个字符串，包含了浏览器名称、版本、操作系统、设备类型等大量信息。解析它是个技术活，因为不同浏览器、不同版本、不同操作系统下的格式千差万别。
```
console.log(navigator.userAgent);
// 示例输出: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
```
navigator.platform
: 返回浏览器运行的操作系统平台，比如"Win32"、"MacIntel"、"Linux armv7l"等。
```
console.log(navigator.platform); // "MacIntel"
```

navigator.cookieEnabled
: 一个布尔值，表示浏览器是否启用了Cookie。

console.log(navigator.cookieEnabled); // true

navigator.onLine
: 一个布尔值，表示浏览器当前是否处于在线状态。这个判断并不总是完全准确，它更多是基于网络连接是否可用，而不是实际能否访问互联网。
```
console.log(navigator.onLine); // true
```
navigator.appName
和
navigator.appVersion
: 这两个属性现在已经不推荐使用，因为它们通常返回的是通用字符串（如
```
appName
```
多为"Netscape"），无法提供精确的浏览器信息。

window

对象和
screen
对象这些主要用于获取视口和屏幕相关的信息。

window.innerWidth
和
window.innerHeight
: 获取浏览器视口（viewport）的宽度和高度，不包括工具栏和滚动条。

console.log(`视口宽度: ${window.innerWidth}, 视口高度: ${window.innerHeight}`);

screen.width
和
screen.height
: 获取用户屏幕的完整分辨率宽度和高度。

console.log(`屏幕分辨率: ${screen.width}x${screen.height}`);

window.devicePixelRatio
: 设备像素比，即物理像素与CSS像素的比值。在高DPI（Retina）屏幕上，这个值会大于1。
```
console.log(`设备像素比: ${window.devicePixelRatio}`);
```

document.documentElement.clientWidth
和
document.documentElement.clientHeight
: 同样可以获取视口尺寸，在某些情况下可能比

window.innerWidth/Height

更稳定或更符合预期。

3. User-Agent Client Hints (现代方法) 为了解决

userAgent

字符串过于庞大、难以解析以及隐私问题，Chrome等浏览器引入了User-Agent Client Hints。这是一种更结构化、更私密的方式来获取浏览器和设备信息。它需要服务器端配合发送

Accept-CH

头，客户端才会发送相应的Client Hints头。

通过

navigator.userAgentData

对象获取，它提供了更结构化的数据，如品牌、版本、平台、架构等。

if (navigator.userAgentData) {
    console.log(navigator.userAgentData.brands); // 浏览器品牌列表
    console.log(navigator.userAgentData.platform); // 操作系统
    console.log(navigator.userAgentData.mobile); // 是否是移动设备
    navigator.userAgentData.getHighEntropyValues(['model', 'platformVersion', 'fullVersionList'])
        .then(ua => {
            console.log(ua); // 更详细的信息
        });
}

需要注意的是，

getHighEntropyValues

需要用户授权或特定策略才能获取更详细的信息。目前兼容性还在逐步提升中。

为什么我们还需要获取浏览器信息？这在实际开发中有什么用？

说实话，现代前端开发越来越推崇“特性检测”而非“浏览器检测”，意思就是我们应该判断浏览器是否支持某个API或CSS属性，而不是去猜测它是哪个浏览器然后为它定制代码。但即便如此，获取浏览器信息依然有其不可替代的价值，尤其是在一些特定的场景下。

首先，兼容性处理。尽管特性检测是王道，但总有些极端情况，或者历史遗留项目，你可能需要针对IE11、某个特定版本的Safari或者微信内置浏览器做一些特殊的CSS调整或者JavaScript Polyfill。这时候，

userAgent

字符串就成了你判断的依据。我个人就遇到过，某个老旧企业系统，在特定版本的Chrome上出现布局错位，最后只能通过

userAgent

来打补丁。

其次，用户行为分析与数据统计。网站的访问日志里通常会记录

User-Agent

，通过对这些数据的分析，我们可以了解用户主要使用的设备类型（PC、手机、平板）、操作系统分布、浏览器市场份额等。这对于产品决策、资源分配（比如是否要投入更多精力优化移动端体验）至关重要。你总得知道你的用户画像吧？

再者，用户体验优化。比如，根据

window.innerWidth

判断是桌面还是移动端，从而加载不同的资源或者调整页面布局。虽然CSS媒体查询能做大部分工作，但JavaScript在需要动态调整逻辑时更灵活。我曾经做过一个视频播放器，在移动端会强制全屏播放，这就需要判断设备类型。

最后，错误排查与日志记录。当用户反馈问题时，如果日志里能带上他们的浏览器版本、操作系统信息，那排查问题的效率会大大提升。你总不能让用户自己去查“我的浏览器是什么版本”吧？

所以，它不是万能药，也不是唯一的路，但它在某些时候，真的能帮上大忙。

获取到的浏览器信息准确吗？有哪些常见的“坑”？

这个问题问得好，准确性，这正是它最大的痛点。我跟你说，获取到的浏览器信息，尤其是通过

navigator.userAgent

，那真是“一言难尽”，充满了各种“坑”。

最大的坑就是

userAgent

字符串的不可靠性。

伪装与欺骗：历史上，浏览器为了兼容性或市场份额，经常互相伪装。比如IE曾经在
```
userAgent
```
里加上"Mozilla"，让网站以为它是Netscape浏览器。现在Chrome的
```
userAgent
```
里也带着"Safari"和"Mozilla"，这让解析变得异常复杂。你以为你识别出了Safari，结果它可能是Chrome。
用户自定义与扩展：用户可以通过浏览器设置或安装扩展来修改
```
userAgent
```
字符串。我见过有人为了访问某些限制网站，直接把自己的
```
userAgent
```
改成旧版IE的，这让你的判断完全失效。
格式不统一：不同浏览器厂商、不同版本，
```
userAgent
```
的格式差异巨大，没有统一的标准。解析它就像在做字符串匹配游戏，需要维护一个庞大的正则表达式库，而且还得不断更新。这简直是维护者的噩梦。
信息冗余与缺失：
```
userAgent
```
里可能包含大量你根本不需要的信息，同时又缺少你真正关心的某些细节。比如，你可能想知道精确的浏览器渲染引擎版本，但它可能只提供一个模糊的版本号。

其他属性的坑：

Autoppt

Autoppt：打造高效与精美PPT的AI工具

下载

```
navigator.appName
```
和
```
navigator.appVersion
```
：前面也提到了，这两个属性基本已经失去了它们的实际意义，多数情况下都返回通用值，完全不可信赖。
```
navigator.platform
```
：在某些情况下，比如在Windows上运行的Linux子系统（WSL），它可能返回的是“Win32”，而不是“Linux”，这可能会导致一些误判。
```
navigator.onLine
```
：这个属性只是判断网络连接是否可用，它并不能保证用户可以访问互联网。比如，你连上了局域网，但局域网没有外网连接，
```
onLine
```
可能依然是
```
true
```
。

所以，我的建议是，除非你真的别无选择，或者你对

userAgent

的解析有非常高的容错性和维护能力，否则尽量避免过度依赖它。更现代、更稳健的做法是特性检测。

除了navigator对象，还有哪些获取设备或环境信息的方法？

当然有，而且很多时候它们比单纯依赖

navigator

更靠谱、更精确。我们获取的不仅仅是“浏览器”信息，更多是“运行环境”的信息，这包括了设备、网络、屏幕等多个维度。

window.matchMedia()

：这是CSS媒体查询在JavaScript中的对应。它允许你通过编程方式查询媒体特性，比如屏幕宽度、设备方向、颜色模式等。这比直接判断

window.innerWidth

更灵活，因为它能直接复用CSS媒体查询的逻辑。

if (window.matchMedia("(max-width: 768px)").matches) {
    console.log("当前是小屏幕设备");
}
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
prefersDark.addEventListener("change", (e) => {
    if (e.matches) {
        console.log("用户切换到了暗色模式");
    }
});

这个方法在响应式设计中非常有用。

特性检测（Feature Detection）：这是我个人最推荐的方式。与其判断“这是Chrome浏览器”，不如判断“这个浏览器是否支持
```
Service Worker
```
？”或者“这个浏览器是否支持
```
WebAssembly
```
？”。
- 检查某个API是否存在：
```
if (window.localStorage) { ... }
```
- 检查某个属性是否存在：
```
if ('ontouchstart' in window) { ... }
```
  (判断是否是触屏设备)
- 检查CSS属性支持：
```
CSS.supports('display', 'grid')
```
  这种方式直接、可靠，因为它关注的是能力而非身份。

screen

对象：虽然前面提到了

screen.width/height

，但它还有

screen.colorDepth

（屏幕颜色深度）、

screen.orientation

（屏幕方向）等属性，可以提供更丰富的屏幕信息。

console.log(`屏幕颜色深度: ${screen.colorDepth}位`);
console.log(`屏幕方向: ${screen.orientation.type}`); // "portrait-primary" 或 "landscape-primary"

```
Performance API
```
：这个API提供了大量关于页面加载性能、网络状态的信息，间接反映了用户的网络环境和设备性能。
- ```
navigator.connection
```
  ：获取网络连接信息，如
```
effectiveType
```
  （2g, 3g, 4g）、
```
rtt
```
  （往返时间）、
```
downlink
```
  （下载速度）。
```
if (navigator.connection) {
console.log(`网络类型: ${navigator.connection.effectiveType}`);
console.log(`往返时间: ${navigator.connection.rtt}ms`);
}
```
  这对于根据网络情况调整资源加载策略很有用。
```
Geolocation API
```
：通过
```
navigator.geolocation
```
可以获取用户的地理位置信息。虽然需要用户授权，但对于LBS（基于位置的服务）应用来说是核心。
设备传感器API：如
```
DeviceOrientationEvent
```
和
```
DeviceMotionEvent
```
，用于获取设备的姿态和运动信息（陀螺仪、加速度计），对于开发游戏或AR应用非常有用。
```
WebRTC
```
API：通过
```
navigator.mediaDevices.enumerateDevices()
```
可以列出用户设备上的媒体输入/输出设备（摄像头、麦克风、扬声器），这对于视频会议、直播等应用是必不可少的。