vue.js之获取设备的品牌和型号（部分设备无法获取）

• 安装mobile-detect.js

npm install mobile-detect --save

• 获取系统/品牌/型号

export default function () {
  const userAgent: string = navigator.userAgent;
  const md = new MobileDetect(userAgent);
  const os: string = md.os(); //获取系统
  console.log("获取系统：", os);
  const phone: string = md.phone(); //获取品牌
  console.log("获取品牌：", phone);
  const model: string = getModel(md, os, userAgent); //设备型号
  console.log("设备型号", model);
}

function getModel(md: any, os: string, userAgent: string): string {
  let model = ''
  if (userAgent.split(")")[0].includes("HMSCore")) {
    // 获取华为鸿蒙
    let HMS = userAgent.split(")")[0].split("HMSCore")[0].split(";");
    model = HMS[HMS.length - 2];
  } else if (os == "iOS") {
    //ios系统的处理
    // @ts-ignore
    model = md.mobile();
    // console.log(md.mobile(), os, '获取系统', os == 'iOS');
    if (model == "iPhone") {
      let iphoneArr = [
        ["430,932,3", "A15", "iPhone 14 Pro Max"],
        ["393,852,3", "A15", "iPhone 14 Pro"],
        ["375,812,3", "A15", "iPhone 13(12) min"],
        ["428,926,3", "A14", "iPhone 14(12/13) Plus"],
        ["390,844,3", "A14", "iPhone 14(12/13)"],
        ["414,896,3", "A13", "iPhone 11 Pro Max(Xs Max)"],
        ["375,812,3", "A13", "iPhone 11 Pro(X/Xs)"],
        ["414,896,2", "A13", "iPhone 11(XR)"],
        ["414,736,3", "A12", "iPhone 8(7/6s) Plus"],
        ["375,667,2", "A11", "iPhone 8(7/6)"],
        ["320,568,2", "A11", "iPhone 5(s/se)"],
        ["320,480,2", "A10", "iPhone 4(s)"],
      ];

      // 获取GPU信息
      var canvas = document.createElement("canvas"),
        gl = canvas.getContext("experimental-webgl"),
        // @ts-ignore
        debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
      // @ts-ignore

      let iphoneGPU = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
      let width = window.screen.width;
      let height = window.screen.height;
      let devicePixelRatio = window.devicePixelRatio;
      console.log(width, height, devicePixelRatio);

      let baseInfo = width + "," + height + "," + devicePixelRatio;
      iphoneArr.some((item) => {
        if (item[0] === baseInfo) {
          model = item[2];
          console.log("iphoneGPU", iphoneGPU == item[1]);
        }
      });
    } else {
      model = "iPad";
    }
  } else if (os == "AndroidOS") {
    //Android系统的处理
    var j;
    var sss = userAgent.split(";");
    for (var i = 0; i < sss.length; i++) {
      if (sss[i].indexOf("Build/") > 0) {
        j = i;
        break;
      }
    }
    // @ts-ignore
    if (j > -1) {
      // @ts-ignore
      model = sss[j].substring(0, sss[j].indexOf("Build/"));
    }
  }
  return model;
}