前端如何获取手机型号

有时候我们做移动端功能时,需要获取用户手机的型号,这次做了一个需求,埋点时要带上用户手机型号,在此记录一下,方便以后再用.

首先,需要用到一个第三方插件 mobile-detect,安装:

yarn add mobile-detect --save

但是这个插件没办法获取到iphone的具体型号,要想获取iphone的具体型号,需要引入iphone-detect,将iphone-detect.min.js下载下来放在你的文件夹下.

然后我们获取手机型号:

//phoneModel.ts
import MobileDetect from "mobile-detect";
//@ts-ignore
import getIphoneModel from "./iPhone-detect.min.js";
// 获取手机型号
function phoneModel() {
  let contains = function(deviceInfo: Array<string>, needle: string) {
    for (let i in deviceInfo) {
      if (deviceInfo[i].indexOf(needle) > 0) return i;
    }
    return -1;
  };
  let device_type = navigator.userAgent; //获取userAgent信息
  let md = new MobileDetect(device_type); //初始化mobile-detect
  let os = md.os(); //获取系统
  let model = "";
  if (os == "iOS") {
    //ios系统的处理
    os = md.os() + md.version("iPhone");
    model = getIphoneModel();
  } else if (os == "AndroidOS") {
    //Android系统的处理
    os = md.os() + md.version("Android");
    let sss: any = device_type.split(";");
    let i = contains(sss, "Build/");
    if (i > -1) {
      model = sss[i].substring(0, sss[i].indexOf("Build/"));
    }
  }
  const brand =
    md.mobile() !== "UnknownPhone"
      ? md.mobile()
      : md.phone() !== "UnknownPhone"
      ? md.phone()
      : "";
  return os == "iOS" ? `${model}(${os})` : `${brand}${model}(${os})`;
}

export default phoneModel;

mobile-detect插件提供的api,可以获取手机的信息,可以根据需要调用:

let md = new MobileDetect(navigator.userAgent);
console.log(md);
console.log(md.mobile()); // 'Sony'
console.log(md.phone()); // 'Sony'
console.log(md.tablet()); // null
console.log(md.userAgent()); // 'Safari'
console.log(md.os()); // 'AndroidOS' 系统
console.log(md.is("iPhone")); // false
console.log(md.is("bot")); // false
console.log(md.version("Webkit")); // 534.3
console.log(md.versionStr("Build")); // '4.1.A.0.562'
console.log(md.match("playstation|xbox"));