JS获取当前电脑浏览器基本信息

功能介绍：如何利用js语法获取用户代理（User-Agent）、浏览器（Browser）、版本（Version）、渲染引擎（Engine）、操作系统（System）、系统平台（Platform）、屏幕尺寸（Screen size）、剩余电量（Battery）、支持字体（Font Family）等基本信息！

具体实现代码如下：

(async function() {
  const info = {};
  info["User-Agent"] = navigator.userAgent;
  const ua = navigator.userAgent;
  let browser = "Unknown",
  version = "Unknown";
  if (ua.includes("Chrome") && !ua.includes("Edg")) {
    browser = "Chrome";
    const match = ua.match(/Chrome\/([\d.]+)/);
    if (match) {
      version = match[1];
    }
  } else if (ua.includes("Firefox")) {
    browser = "Firefox";
    const match = ua.match(/Firefox\/([\d.]+)/);
    if (match) {
      version = match[1];
    }
  } else if (ua.includes("Safari") && !ua.includes("Chrome")) {
    browser = "Safari";
    const match = ua.match(/Version\/([\d.]+)/);
    if (match) {
      version = match[1];
    }
  } else if (ua.includes("Edg")) {
    browser = "Edge";
    const match = ua.match(/Edg\/([\d.]+)/);
    if (match) {
      version = match[1];
    }
  } else if (ua.includes("OPR") || ua.includes("Opera")) {
    browser = "Opera";
    const match = ua.match(/OPR\/([\d.]+)/);
    if (match) {
      version = match[1];
    }
  } else if (ua.includes("Trident") || ua.includes("MSIE")) {
    browser = "Internet Explorer";
    const match = ua.match(/(?:MSIE |rv:)([\d.]+)/);
    if (match) {
      version = match[1];
    }
  }
  info["Browser"] = browser;
  info["Version"] = version;
  let engine = "Unknown";
  if (ua.includes("WebKit")) engine = "WebKit";
  else if (ua.includes("Gecko")) engine = "Gecko";
  else if (ua.includes("Trident")) engine = "Trident";
  info["Engine"] = engine;
  let os = "Unknown";
  if (ua.includes("Windows")) os = "Windows";
  else if (ua.includes("Mac OS")) os = "macOS";
  else if (ua.includes("Linux")) os = "Linux";
  else if (ua.includes("Android")) os = "Android";
  else if (ua.includes("iPhone") || ua.includes("iPad")) os = "iOS";
  info["System"] = os;
  info["Platform"] = navigator.platform;
  info["Screen size"] = `${screen.width}x${screen.height}`;
  info["Client size"] = `${window.innerWidth}x${window.innerHeight}`;
  if (navigator.userAgentData) {
    const {
      architecture
    } = navigator.userAgentData;
    info["Architecture"] = architecture
  } else {
    info["Architecture"] = ''
  }
  const isMobile = /Mobi|Android|iPhone|iPad/i.test(ua);
  info["Device type"] = isMobile ? "Mobile": "Desktop";
  info["Device Pixel Ratio"] = window.devicePixelRatio;
  info["Device Memory"] = navigator.deviceMemory || "Unknown";
  const canvas = document.createElement("canvas");
  const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  let gpu = "Unknown";
  if (gl) {
    const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
    if (debugInfo) {
      gpu = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
    }
  }
  info["GPU model"] = gpu;
  info["Language"] = navigator.language;
  info["Timezone"] = Intl.DateTimeFormat().resolvedOptions().timeZone;
  info["Is Online"] = navigator.onLine;
  if ("getBattery" in navigator) {
    const battery = await navigator.getBattery();
    info["Battery"] = `${(battery.level * 100).toFixed(0)}%`;
    info["Is charging"] = battery.charging;
  } else {
    info["Battery"] = "Unavailable";
    info["Is charging"] = "Unavailable"
  }
  const isBot = /bot|crawler|spider|slurp|teoma/i.test(ua);
  info["Is robot"] = isBot;
  const isWebview = /wv|webview/i.test(ua);
  info["Is Webview"] = isWebview;
  info["Is Touch Screen"] = "ontouchstart" in window;
  info["Is Support WebGL"] = !!gl;
  info["Font Family"] = getComputedStyle(document.body).fontFamily;
  console.log('info', info)
})();

进入案列官网入口