获取浏览器信息最直接的方式是使用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
字符串的不可靠性。
伪装与欺骗：历史上，浏览器为了兼容性或市场份额，经常互相伪装。比如IE曾经在
userAgent
里加上”Mozilla”，让网站以为它是Netscape浏览器。现在Chrome的
userAgent
里也带着”Safari”和”Mozilla”，这让解析变得异常复杂。你以为你识别出了Safari，结果它可能是Chrome。用户自定义与扩展：用户可以通过浏览器设置或安装扩展来修改
userAgent
字符串。我见过有人为了访问某些限制网站，直接把自己的
userAgent
改成旧版IE的，这让你的判断完全失效。格式不统一：不同浏览器厂商、不同版本，
userAgent
的格式差异巨大，没有统一的标准。解析它就像在做字符串匹配游戏，需要维护一个庞大的正则表达式库，而且还得不断更新。这简直是维护者的噩梦。信息冗余与缺失：
userAgent
里可能包含大量你根本不需要的信息，同时又缺少你真正关心的某些细节。比如，你可能想知道精确的浏览器渲染引擎版本，但它可能只提供一个模糊的版本号。
其他属性的坑：
php获取客户端的ip、地理信息、浏览器信息等内容的类
php获取客户端的ip、地理信息、浏览器信息等内容的类
454 查看详情
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 如何获取浏览器信息的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/749522.html
微信扫一扫 
支付宝扫一扫 
