js 如何获取浏览器信息

获取浏览器信息最直接的方式是使用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解析，以提高准确性和可维护性。

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

navigator

和

window

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

解决方案

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

navigator

和

window

这两个全局对象展开。

1.

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”），无法提供精确的浏览器信息。

2.

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

字符串的不可靠性。

1. 伪装与欺骗：历史上，浏览器为了兼容性或市场份额，经常互相伪装。比如IE曾经在

   userAgent

   里加上”Mozilla”，让网站以为它是Netscape浏览器。现在Chrome的

   userAgent

   里也带着”Safari”和”Mozilla”，这让解析变得异常复杂。你以为你识别出了Safari，结果它可能是Chrome。

2. 用户自定义与扩展：用户可以通过浏览器设置或安装扩展来修改

   userAgent

   字符串。我见过有人为了访问某些限制网站，直接把自己的

   userAgent

   改成旧版IE的，这让你的判断完全失效。

3. 格式不统一：不同浏览器厂商、不同版本，

   userAgent

   的格式差异巨大，没有统一的标准。解析它就像在做字符串匹配游戏，需要维护一个庞大的正则表达式库，而且还得不断更新。这简直是维护者的噩梦。

4. 信息冗余与缺失：

   userAgent

   里可能包含大量你根本不需要的信息，同时又缺少你真正关心的某些细节。比如，你可能想知道精确的浏览器渲染引擎版本，但它可能只提供一个模糊的版本号。

其他属性的坑：

• navigator.appName

  和

  navigator.appVersion

  ：前面也提到了，这两个属性基本已经失去了它们的实际意义，多数情况下都返回通用值，完全不可信赖。

• navigator.platform

  ：在某些情况下，比如在Windows上运行的Linux子系统（WSL），它可能返回的是“Win32”，而不是“Linux”，这可能会导致一些误判。

• navigator.onLine

  ：这个属性只是判断网络连接是否可用，它并不能保证用户可以访问互联网。比如，你连上了局域网，但局域网没有外网连接，

  onLine

  可能依然是

  true

  。

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

userAgent

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

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

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

navigator

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

1. 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("用户切换到了暗色模式");     } });

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

2. 特性检测（Feature Detection）：这是我个人最推荐的方式。与其判断“这是Chrome浏览器”，不如判断“这个浏览器是否支持

   Service Worker

   ？”或者“这个浏览器是否支持

   WebAssembly

   ？”。

   • 检查某个API是否存在：

     if (window.localStorage) { ... }
   • 检查某个属性是否存在：

     if ('ontouchstart' in window) { ... }

     (判断是否是触屏设备)

   • 检查CSS属性支持：

     CSS.supports('display', 'grid')

     这种方式直接、可靠，因为它关注的是能力而非身份。

3. screen

   对象：虽然前面提到了

   screen.width/height

   ，但它还有

   screen.colorDepth

   （屏幕颜色深度）、

   screen.orientation

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

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

4. 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`); }

     这对于根据网络情况调整资源加载策略很有用。

5. Geolocation API

   ：通过

   navigator.geolocation

   可以获取用户的地理位置信息。虽然需要用户授权，但对于LBS（基于位置的服务）应用来说是核心。

6. 设备传感器API：如

   DeviceOrientationEvent

   和

   DeviceMotionEvent

   ，用于获取设备的姿态和运动信息（陀螺仪、加速度计），对于开发游戏或AR应用非常有用。

7. WebRTC

   API：通过

   navigator.mediaDevices.enumerateDevices()

   可以列出用户设备上的媒体输入/输出设备（摄像头、麦克风、扬声器），这对于视频会议、直播等应用是必不可少的。

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