判断浏览器运行环境

国际五大浏览器品牌：按照全球使用率降序排列

• Google Chrome：Windows、MacOS、Linux、Android、iOS
• Apple Safari：MacOS、iOS
• Mozilla Firefox：Windows、MacOS、Linux、Android、iOS
• ASA Opera：Windows、MacOS、Linux、Android、iOS
• Microsoft Internet Explorer或Microsoft Edge：Windows

原理

针对判断浏览器运行环境，其实有一个比较专业的名字，叫做浏览器指纹—UserAgent。UserAgent包含了一个特征字符串，用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。通过这些信息，我们就可以判断浏览器运行环境了

实现

此方案是基于navigator.userAgent获取相关浏览器信息(如下)，再通过系统、平台、内核、载体、外壳的特有字段进行归类统一，整理出一个完整的浏览器运行环境。

const ua = navigator.userAgent.toLowerCase();
//输出
`mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/113.0.0.0 safari/537.36`

浏览器信息：权重按照以下降序排列

• 浏览器系统：所运行的操作系统，包含Windows、MacOS、Linux、Android、iOS
• 浏览器平台：所运行的设备平台，包含Desktop桌面端、Mobile移动端
• 浏览器内核：浏览器渲染引擎，包含Webkit、Gecko、Presto、Trident
• 浏览器载体：五大浏览器品牌，包含Chrome、Safari、Firefox、Opera、IExplore/Edge
• 浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌

 // 浏览器当前环境
const system_judgment = (function () {
  const userAgentInfo = navigator.userAgent.toLowerCase();
  const isIE11 = !!window.ActiveXObject || "ActiveXObject" in window;
  const isEdgeOld = navigator.userAgent.indexOf("Edge/") > -1;
  const isEdgeNew = navigator.userAgent.indexOf("Edg/") > -1;
  const isSafari =
    /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
  const isUC = navigator.userAgent.indexOf("UCBrowser") > -1;
  const isHW = userAgentInfo.indexOf("HuaweiBrowser") > -1;
  const isFF = userAgentInfo.indexOf("Firefox") > -1;
  const isWX =
    userAgentInfo.toLowerCase().match(/MicroMessenger/i) == "micromessenger";
  const viewportWidth = document.documentElement.clientWidth;
  const viewportHeight = document.documentElement.clientHeight;
  const aspectRatio = viewportWidth / viewportHeight;
  const isMob = aspectRatio < 1.1;
  return {
    isIE11: isIE11,
    isEdgeOld: isEdgeOld,
    isEdgeNew: isEdgeNew,
    isSafari: isSafari,
    isUC: isUC,
    isHW: isHW,
    isFF: isFF,
    isWX: isWX,
    isMob: isMob,
  };
})();