JS获取设备信息的方法有哪些？

本文深入探讨了在JavaScript中获取设备信息的各种方法，并着重强调了浏览器环境与Node.js环境的区别。在浏览器端，主要依赖于`navigator`对象，通过解析`userAgent`、`platform`等属性来获取设备信息，并可结合正则表达式或第三方库进行更精确的浏览器类型识别。而在Node.js环境中，则需借助`os`和`process`模块来获取操作系统类型、CPU架构、内存等信息。此外，文章还讨论了如何判断移动设备，并指出`navigator.userAgent`的不可靠性及其原因。最后，针对浏览器兼容性问题，提出了特性检测、polyfill、第三方库、渐进增强等多种解决方案，以及隐私安全注意事项，旨在帮助开发者更准确、安全地获取设备信息，提升用户体验。

在JavaScript中获取设备信息需区分浏览器和Node.js环境；2. 浏览器中通过navigator对象获取userAgent、platform、language等信息，并结合正则或第三方库解析浏览器类型；3. Node.js中使用os和process模块获取操作系统类型、CPU架构、内存、主机名及Node版本；4. 判断移动设备应结合userAgent关键词和触摸支持特性（如'ontouchstart'或maxTouchPoints）；5. navigator.userAgent不可靠因可被用户修改、浏览器厂商调整或隐私策略限制；6. 兼容性处理应采用特性检测、polyfill、第三方库、渐进增强、多环境测试和错误处理等策略；7. 注意隐私安全，避免过度收集信息，防止设备指纹追踪。

获取设备信息，在JavaScript里其实挺微妙的。你得区分是在浏览器环境还是Node.js环境，这俩获取方式完全不一样。浏览器里主要是靠navigator对象，Node.js则需要一些额外的模块。

解决方案

浏览器环境：navigator对象

浏览器里，navigator对象是你的好朋友。它暴露了各种关于浏览器和操作系统的信息。但是，注意！不同浏览器对navigator的实现可能略有差异，所以要做好兼容性处理。

// 获取用户代理字符串
const userAgent = navigator.userAgent;
console.log("User Agent:", userAgent);

// 获取平台信息 (例如 "Win32", "Linux x86_64", "MacIntel")
const platform = navigator.platform;
console.log("Platform:", platform);

// 获取浏览器名称（不完全可靠，userAgent更常用）
const appName = navigator.appName;
console.log("App Name:", appName);

// 获取浏览器版本（不完全可靠，userAgent更常用）
const appVersion = navigator.appVersion;
console.log("App Version:", appVersion);

// 获取语言
const language = navigator.language || navigator.userLanguage; // 兼容不同浏览器
console.log("Language:", language);

// 获取设备是否支持触摸
const touchEnabled = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
console.log("Touch Enabled:", touchEnabled);

User Agent字符串解析：

userAgent字符串包含了大量信息，但直接使用起来比较麻烦。你可以用正则表达式或者专门的库来解析它，提取出操作系统、浏览器类型、版本等信息。

function getBrowserInfo() {
  const ua = navigator.userAgent;
  let tem;
  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  if (/trident/i.test(M[1])) {
    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
    return 'IE ' + (tem[1] || '');
  }
  if (M[1] === 'Chrome') {
    tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
    if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
  }
  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
  if ((tem = ua.match(/version\/(\d+)/i)) != null) {
    M.splice(1, 1, tem[1]);
  }
  return M.join(' ');
}

console.log("Browser Info:", getBrowserInfo());

Node.js环境：os和process模块

Node.js里，navigator不存在。你需要使用os和process模块。

const os = require('os');
const process = require('process');

// 获取操作系统类型 (例如 'Windows_NT', 'Linux', 'Darwin')
const osType = os.type();
console.log("OS Type:", osType);

// 获取操作系统版本
const osRelease = os.release();
console.log("OS Release:", osRelease);

// 获取CPU架构 (例如 'x64', 'arm64')
const osArch = os.arch();
console.log("OS Architecture:", osArch);

// 获取主机名
const hostname = os.hostname();
console.log("Hostname:", hostname);

// 获取Node.js版本
const nodeVersion = process.version;
console.log("Node.js Version:", nodeVersion);

// 获取CPU信息
const cpus = os.cpus();
console.log("CPUs:", cpus); // 返回一个数组，包含每个CPU的信息

// 获取内存信息
const totalMemory = os.totalmem();
const freeMemory = os.freemem();
console.log("Total Memory:", totalMemory);
console.log("Free Memory:", freeMemory);

更深入的设备信息获取：

无论是浏览器还是Node.js，直接获取设备型号、制造商等信息都比较困难。

• 浏览器： 可以考虑使用第三方库，例如bowser，它可以更精确地解析userAgent字符串。或者，如果你的应用是PWA，可以使用Web APIs，比如Battery API（获取电池信息），Network Information API（获取网络连接信息）。但这些API的兼容性和权限问题需要注意。
• Node.js： 可以尝试一些系统信息收集的npm包，例如systeminformation。但要注意，这些包可能需要安装额外的系统依赖，并且可能存在跨平台兼容性问题。

安全性和隐私：

获取设备信息时，务必注意用户隐私。不要收集不必要的敏感信息，并确保遵循相关的隐私政策和法规。 尤其是在浏览器环境，过度收集设备信息可能会被认为是fingerprinting，对用户隐私造成威胁。

如何判断用户是否使用了移动设备？

判断用户是否使用了移动设备，最常用的方法还是通过navigator.userAgent。但是，直接判断字符串是否包含"Mobile"或者"Android"这样的关键词并不靠谱，因为很多桌面浏览器也可能伪装成移动设备。

更可靠的方法是结合userAgent和navigator.maxTouchPoints属性。

function isMobileDevice() {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return true; // 粗略判断
  }

  // 结合触摸事件支持判断
  if ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0) {
    return true; // 更准确的判断
  }

  return false;
}

console.log("Is Mobile Device:", isMobileDevice());

这种方法先通过userAgent进行初步判断，如果包含常见的移动设备关键词，则认为是移动设备。然后，再通过检查是否支持触摸事件来进一步确认。如果支持触摸事件，则更倾向于认为是移动设备。

为什么navigator.userAgent不可靠？

navigator.userAgent字符串可以被用户修改，这意味着用户可以伪装成任何浏览器或设备。所以，仅仅依赖userAgent来判断设备信息是不准确的。

浏览器厂商也会出于兼容性或其他原因修改userAgent字符串，导致其与实际情况不符。

现代浏览器越来越注重用户隐私保护，可能会限制userAgent字符串的详细程度，甚至对其进行随机化处理。

如何处理不同浏览器之间的兼容性问题？

处理浏览器兼容性问题，是前端开发的永恒主题。对于设备信息获取，可以考虑以下几个方面：

1. 特性检测： 不要直接假设某个API一定存在，而是先进行特性检测，判断浏览器是否支持该API。例如：

   if ('geolocation' in navigator) {
     // 使用地理位置API
   } else {
     // 提供备选方案
   }

2. 使用polyfill或shim： 对于一些较新的API，可以使用polyfill或shim来提供兼容性支持。例如，es5-shim可以为老版本浏览器提供ECMAScript 5的特性支持。

3. 使用第三方库： 一些第三方库已经封装了各种兼容性处理，可以简化开发工作。例如，Modernizr可以检测浏览器支持的各种特性。

4. 渐进增强和优雅降级： 采用渐进增强的策略，先保证基本功能在所有浏览器上可用，然后逐步添加更高级的特性。对于不支持这些特性的浏览器，提供优雅的降级方案。

5. 测试： 在各种浏览器和设备上进行充分的测试，确保应用在不同环境下都能正常工作。

6. 错误处理： 合理处理可能出现的错误，例如API调用失败、权限被拒绝等。

7. 使用Typescript： 可以在开发时使用Typescript，它可以在编译阶段发现一些潜在的兼容性问题。

本篇关于《JS获取设备信息的方法有哪些？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！