JavaScript如何获取设备信息？navigator对象详解

文章不知道大家是否熟悉？今天我将给大家介绍《JavaScript如何检测设备信息？navigator对象详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

navigator 可获取 userAgent、platform、vendor、hardwareConcurrency、deviceMemory、maxTouchPoints 等属性，其中 platform 和 maxTouchPoints 相对可靠；iOS 判断需结合 UA 匹配与触控特征；UA 已因减损策略不可信，推荐用运行时能力探测替代字符串解析。

直接看 navigator 能拿到什么设备特征——它不保证准确，但能快速判断大致环境；真要精准识别设备型号或系统版本，得靠服务端 UA 解析 + 客户端补充特征（比如屏幕尺寸、触控支持、WebGL 渲染器）。

哪些 navigator 属性实际可用且相对可靠？

现代浏览器中，以下属性在多数场景下可读、有参考价值，但要注意部分值可能被用户代理伪造或受隐私策略限制：

• navigator.userAgent：字符串，含浏览器名、版本、内核、操作系统等，但已被大量混淆或简化（如 Chrome 110+ 默认启用 UA 减损）
• navigator.platform：如 "Win32"、"MacIntel"、"Linux arm64"，比 UA 更稳定，但无法区分 iOS/Android（都可能是 "Linux" 或 "MacIntel"）
• navigator.vendor：通常为 "Google Inc."、"Apple Computer, Inc."，可辅助判断内核归属
• navigator.hardwareConcurrency：CPU 逻辑核心数，对性能预估有帮助（注意低权限上下文可能返回 2 或被限制）
• navigator.deviceMemory：内存大小估算（如 2、4、8 GB），需 HTTPS 且部分浏览器仅支持整数档位
• navigator.maxTouchPoints：支持同时触点数，0 表示无触控，>0 基本可认为是移动/平板设备

如何组合判断是否为 iOS 设备？

iOS 的 UA 字符串在 Safari 和 WKWebView 中仍保留 "iPhone" / "iPad" / "iPod"，但不能单靠 userAgent，因为桌面版 Safari 也可能含 "Macintosh"。更稳妥的方式是交叉验证：

function isIOS() {
  const ua = navigator.userAgent;
  const platform = navigator.platform;
  const isIOSUA = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
  const isIOSSafari = /MacIntel/.test(platform) && 'ontouchend' in document && !/Android/.test(ua);
  return isIOSUA || isIOSSafari;
}

注意：isIOSSafari 分支用于识别 macOS 上的 Safari（它支持触控事件但非 iOS），实际业务中若只需区分“是否 iOS”，优先用 UA 匹配 + navigator.standalone（PWA 启动时为 true）更轻量。

为什么 navigator.userAgent 不再可信？

Chrome 从 110 版本起默认启用 UA 减损（User-Agent Reduction），将原本详细的 UA 改为极简格式，例如：

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

其中缺失了 CPU 架构、系统详细版本、甚至浏览器真实构建号。Firefox 和 Safari 也在跟进类似策略。这意味着：

• 不能依赖 userAgent 提取精确 Android 版本（如 "Android 13" 可能被抹成 "Android"）
• navigator.userAgentData 是新替代方案，但需显式请求（navigator.userAgentData.getHighEntropyValues([...])），且必须在安全上下文（HTTPS）、用户交互后调用，返回字段也受权限控制
• 很多老检测库（如 UAParser.js）若未升级，会因 UA 缺失关键字段而误判

真正该关注的设备特征其实是运行时行为

比起解析字符串，更健壮的做法是探测能力：

• 用 'ontouchstart' in window 或 matchMedia('(hover: none) and (pointer: coarse)').matches 判断是否为触控优先设备
• 用 window.screen.width 和 window.devicePixelRatio 估算物理屏幕密度和视口尺寸
• 用 document.body.classList.add('platform-' + (navigator.platform || 'unknown').toLowerCase()) 在 HTML 根节点打标记，供 CSS 或 JS 分流
• 避免写 if (isIOS) { ... } 这类硬分支，改用 if ('safari' in navigator.vendor) { ... } 或基于功能的 fallback

设备特征不是用来贴标签的，而是为了适配交互方式、资源加载策略或渲染路径；一旦把 navigator 当作唯一真相源，就容易在隐私增强、UA 减损、WebView 封装等场景下失效。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript如何获取设备信息？navigator对象详解》文章吧，也可关注golang学习网公众号了解相关技术文章。