js 如何获取浏览器信息-js教程-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
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
里可能包含大量你根本不需要的信息，同时又缺少你真正关心的某些细节。比如，你可能想知道精确的浏览器渲染引擎版本，但它可能只提供一个模糊的版本号。

其他属性的坑：

```
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()
```
登录后复制
可以列出用户设备上的媒体输入/输出设备（摄像头、麦克风、扬声器），这对于视频会议、直播等应用是必不可少的。

这些方法各有侧重，很多时候你需要结合使用它们，才能拼凑出用户当前运行环境的全貌。毕竟，一个完整的用户体验，不仅仅是浏览器本身决定的。

以上就是js 如何获取浏览器信息的详细内容，更多请关注php中文网其它相关文章！