H5获取手机型号,获取具体手机型号

这篇具有很好参考价值的文章主要介绍了H5获取手机型号,获取具体手机型号。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

H5获取手机型号,获取具体手机型号 H5获取手机型号,获取具体手机型号

 需求: H5页面获取手机具体机型在提交照片时传给服务端,并在pc端展示

分析实现:因为H5 是运行在浏览器上的,只能获取window上给的信息也就是浏览器信息。如下图所示,这是安卓机(华为)的拿取到的信息。重这个信息中我们可以获取到手机的入网机型代码,这个也是唯一,是由工信部批准的,是唯一不会变的。

H5获取手机型号,获取具体手机型号

 苹果的我们是拿不到这个信息的,不过苹果我们可以根据逻辑分辨率来时区分机型(此方法无法区分具体机型比如xr与11都是414,896,2)那就做折中方案苹果机型做或的处理iPhone 11(XR)

下面是代码实现

第一步  安装mobile-detect   

yarn add mobile-detect -s

 到package.json中查看

"mobile-detect": "^1.4.5",

第二步新建model.ts   存放数据

// 判断业务是否是 iphone、华为、小米、oppo、view、三星 打开
export function judgeBrand(sUserAgent: any) {
  var isIphone = sUserAgent.match(/iphone/i) == 'iphone';
  var isHuawei = sUserAgent.match(/huawei/i) == 'huawei';
  var isHonor = sUserAgent.match(/honor/i) == 'honor';
  var isOppo = sUserAgent.match(/oppo/i) == 'oppo';
  var isOppoR15 = sUserAgent.match(/pacm00/i) == 'pacm00';
  var isVivo = sUserAgent.match(/vivo/i) == 'vivo';
  var isXiaomi = sUserAgent.match(/mi\s/i) == 'mi ';
  var isXiaomi2s = sUserAgent.match(/mix\s/i) == 'mix ';
  var isRedmi = sUserAgent.match(/redmi/i) == 'redmi';
  var isSamsung = sUserAgent.match(/sm-/i) == 'sm-';
  var isLG = sUserAgent.match(/lg/i) == 'lg';
  if (isIphone) {
    return 'iPhone';
  } else if (isHuawei || isHonor) {
    return 'Huawei';
  } else if (isOppo || isOppoR15) {
    return 'Oppo';
  } else if (isVivo) {
    return 'vivo';
  } else if (isXiaomi || isRedmi || isXiaomi2s) {
    return 'mi';
  } else if (isSamsung) {
    return 'Samsung';
  } else if (isLG) {
    return 'LG';
  } else {
    return '其他型号手机';
  }
}
export const arrModal = [
  {
    // 华为
    type: 'Huawei',
    modelNumber: [
      {
        lable: 'NOH-AN50',
        value: '华为Mate40E Pro',
      },
      {
        lable: 'NOH-AN50',
        value: '华为Mate40E Pro',
      },
      {
        lable: 'ABR-AL60',
        value: '华为P50E',
      },
      {
        lable: 'BRQ-AN00',
        value: '华为nova8 Pro',
      },
      {
        lable: 'JLN-AL00',
        value: '华为nova 9 SE',
      },
      {
        lable: 'CHA-AL80',
        value: '华为nova 10z',
      },
      {
        lable: 'MGA-AL00',
        value: '华为畅享 50',
      },
      {
        lable: 'NCO-AL00',
        value: '华为nova 10',
      },
      {
        lable: 'GLA-AL00',
        value: '华为nova 10 Pro',
      },
      {
        lable: 'TET-AN50',
        value: '华为Mate Xs 2',
      },
      {
        lable: 'RTE-AL00',
        value: '华为nova 9 Pro',
      },
      {
        lable: 'NAM-AL00',
        value: '华为nova 9',
      },
      {
        lable: 'BAL-AL80',
        value: '华为P50 Pocket S',
      },
      {
        lable: 'JAD-AL50',
        value: '华为P50 Pro',
      },
      {
        lable: 'NOH-AN50',
        value: '华为Mate40E',
      },
      {
        lable: 'OCE-AN00',
        value: '华为Mate40',
      },
      {
        lable: 'NOH-AN00',
        value: '华为Mate40 Pro',
      },
      {
        lable: 'NOP-AN00',
        value: '华为Mate40 Pro+',
      },
      {
        lable: 'ANA-AN00',
        value: '华为P40',
      },
      {
        lable: 'ANA-TN00',
        value: '华为P40',
      },
      {
        lable: 'ELS-AN00',
        value: '华为P40 Pro',
      },
      {
        lable: 'ELS-TN00',
        value: '华为P40 Pro',
      },
      {
        lable: 'ELS-AN10',
        value: '华为P40 Pro Premium Edition',
      },
      {
        lable: 'CET-AL60',
        value: '华为 Mate 50E',
      },
      {
        lable: 'BNE-AL00',
        value: '华为 Mate 50',
      },
      {
        lable: 'CTR-AL00',
        value: '华为畅享 50 Pro',
      },
      {
        lable: 'STK-AL00',
        value: '华为畅享 10 Pro',
      },
      {
        lable: 'CET-AL00',
        value: '华为 Mate 50 RS',
      },
      {
        lable: 'DCO-AL00',
        value: '华为 Mate 50 Pro',
      },
      {
        lable: 'JSC-AN00',
        value: '华为nova 8 SE',
      },
      {
        lable: 'ANG-AN00',
        value: '华为nova 8',
      },
      {
        lable: 'OCE-AN00',
        value: '华为Mate40',
      },
      {
        lable: 'NOH-AN00',
        value: '华为Mate40 Pro',
      },
      {
        lable: 'NOP-AN00',
        value: '华为Mate40 Pro+',
      },
      {
        lable: 'LIO-AL00',
        value: '华为Mate30E Pro',
      },
      {
        lable: 'CindyN-AN00',
        value: '华为nova 7 SE',
      },
      {
        lable: 'ELE-AL00',
        value: '华为P30',
      },
      {
        lable: 'VOG-AL10',
        value: '	华为P30 Pro',
      },
      {
        lable: 'HMA-AL00',
        value: '华为Mate20',
      },
      {
        lable: 'EML-AL00',
        value: '华为P20',
      },
      {
        lable: 'CLT-AL00',
        value: '华为P20 Pro',
      },
      {
        lable: 'LYA-AL00',
        value: '华为Mate20 Pro',
      },
      {
        lable: 'LIO-AN00',
        value: '华为Mate30 Pro',
      },
      {
        lable: 'VOG-AL00',
        value: '华为P30 Pro',
      },
      {
        lable: 'SEA-AL10',
        value: '华为nova5 Pro',
      },
      {
        lable: 'TAS-AN00',
        value: '华为Mate30',
      },
      {
        lable: 'TAS-AL00',
        value: '华为Mate30',
      },
      {
        lable: 'PAR-AL00',
        value: '华为Nova 3',
      },
      {
        lable: 'VCE-AL00',
        value: '华为Nova 4',
      },
      {
        lable: 'ADT-AN00',
        value: '荣耀X40 GT',
      },
      {
        lable: 'VNE-AN40',
        value: '荣耀Play6C',
      },
      {
        lable: 'FNE-AN00',
        value: '荣耀70 Pro',
      },
      {
        lable: 'HPB-AN00',
        value: '荣耀70 Pro+',
      },
      {
        lable: 'VNE-AN00',
        value: '荣耀畅玩30',
      },
      {
        lable: 'CMA-AN40',
        value: '荣耀Play6T',
      },
      {
        lable: 'LGE-AN20',
        value: '荣耀Magic4 至臻版',
      },
      {
        lable: 'TFY-AN40',
        value: '荣耀Play6T Pro',
      },
      {
        lable: 'LGE-AN00',
        value: '荣耀Magic4',
      },
      {
        lable: 'LGE-AN10',
        value: '荣耀Magic4 Pro',
      },
      {
        lable: 'TFY-AN40',
        value: '荣耀60 SE',
      },
      {
        lable: 'MGI-AN00',
        value: '荣耀Magic V',
      },
      {
        lable: 'DIO-AN00',
        value: '荣耀X40i',
      },
      {
        lable: 'ANY-AN00',
        value: '荣耀X30',
      },
      {
        lable: 'EDG-AN00',
        value: '荣耀X30i',
      },
      {
        lable: 'TFY-AN00',
        value: '荣耀X30i',
      },
      {
        lable: 'KKG-AN70',
        value: '荣耀X30 Max',
      },
      {
        lable: 'CMA-AN00',
        value: '荣耀畅玩30 Plus',
      },
      {
        lable: 'TNA-AN00',
        value: '荣耀60 Pro',
      },
      {
        lable: 'LSA-AN00',
        value: '荣耀60',
      },
      {
        lable: 'ELZ-AN10',
        value: '荣耀Magic3 Pro',
      },
      {
        lable: 'ELZ-AN20',
        value: '荣耀Magic3 至臻版',
      },
      {
        lable: 'JLH-AN00',
        value: '荣耀50 SE',
      },
      {
        lable: 'CHL-AN00',
        value: '荣耀X20 SE',
      },
      {
        lable: 'NTN-AN00',
        value: '荣耀50',
      },
    ],
  },
  {
    // 华为
    type: 'vivo',
    modelNumber: [
      {
        lable: 'V1731CA',
        value: 'vivo Y73t',
      },
      {
        lable: 'V2166BA',
        value: 'vivo Y77e',
      },
      {
        lable: 'V2219A',
        value: 'vivo Y77',
      },
      {
        lable: 'V2188A',
        value: 'vivo T2x',
      },
      {
        lable: 'V2170A',
        value: 'vivo X Note',
      },
      {
        lable: 'V2178A',
        value: 'vivo X Fold',
      },
      {
        lable: 'V2166A',
        value: 'vivo Y33s',
      },
      {
        lable: 'V2168A',
        value: 'vivo Y10(t1)',
      },
      {
        lable: 'V2229A',
        value: 'vivo X Fold+',
      },
      {
        lable: 'V2183A',
        value: 'vivo X80',
      },
      {
        lable: 'V2207A',
        value: 'vivo S15 Pro',
      },
      {
        lable: 'V2203A',
        value: 'vivo S15',
      },
      {
        lable: 'V2185A',
        value: 'vivo X80 Pro',
      },
      {
        lable: 'V2199A',
        value: 'vivo S15e',
      },
      {
        lable: 'V2199GA',
        value: 'vivo S15 Pro',
      },
      {
        lable: 'V2185A',
        value: 'vivo X80 Pro',
      },
      {
        lable: 'V2162A',
        value: 'vivo S12',
      },
      {
        lable: 'V2156A',
        value: 'vivo Y55s',
      },
      {
        lable: 'V2163A',
        value: 'vivo S12 Pro',
      },
      {
        lable: 'V2158A',
        value: 'vivo Y32',
      },
      {
        lable: 'V2123A',
        value: 'vivo X70',
      },
      {
        lable: 'V2156A',
        value: 'vivo Y76s',
      },
      {
        lable: 'V2130A',
        value: 'vivo S10e',
      },
      {
        lable: 'V2134A',
        value: 'vivo X70 Pro',
      },
      {
        lable: 'V2123A',
        value: 'vivo X70',
      },
      {
        lable: 'V2125A',
        value: 'vivo X70 Pro+',
      },
      {
        lable: 'V2111A',
        value: 'vivo Y53s',
      },
      {
        lable: 'V2121A',
        value: 'vivo S10 Pro',
      },
      {
        lable: 'V2121A',
        value: 'vivo S10',
      },
      {
        lable: 'V2059A',
        value: 'vivo X60',
      },
      {
        lable: 'V2068A',
        value: 'vivo Y31s',
      },
      {
        lable: 'V2056A',
        value: 'vivo X60t Pro+',
      },
      {
        lable: 'V2057A',
        value: 'vivo Y52s',
      },
      {
        lable: 'V2072A',
        value: 'vivo S9',
      },
      {
        lable: 'V2048A',
        value: 'vivo S9e',
      },
      {
        lable: 'V2034A',
        value: 'vivo Y30g',
      },
      {
        lable: 'V2085A',
        value: 'vivo X60t',
      },
      {
        lable: 'V2080A',
        value: 'vivo S7t',
      },
      {
        lable: 'V2034A',
        value: 'vivo Y30',
      },
      {
        lable: 'V2031EA',
        value: 'vivo S7e',
      },
      {
        lable: 'V2031A',
        value: 'vivo Y73s',
      },
      {
        lable: 'V2020A',
        value: 'vivo Y3s',
      },
      {
        lable: 'TAS-AN00',
        value: 'vivo S7',
      },
    ],
  },
  {
    type: 'Samsung',
    modelNumber: [
      {
        lable: 'SM-G965U',
        value: 'Samsung S9+',
      },
      {
        lable: 'SM-W9023',
        value: 'Samsung W23',
      },
      {
        lable: 'SM-W7023',
        value: 'Samsung W23 Flip',
      },
      {
        lable: 'SM-S9010',
        value: 'Samsung Galaxy S22',
      },
      {
        lable: 'SM-S9060',
        value: 'Samsung Galaxy S22 Plus',
      },
      {
        lable: 'SM-S9080',
        value: 'Samsung Galaxy S22 Note',
      },
      {
        lable: 'SM-G9900',
        value: 'Samsung Galaxy S21 FE',
      },
      {
        lable: 'SM-G998U',
        value: 'Samsung Galaxy S21 Ultra',
      },
      {
        lable: 'SM-F7210',
        value: 'Samsung Galaxy Z Flip4',
      },
      {
        lable: 'SM-F9360',
        value: 'Samsung Galaxy Z Fold4',
      },
      {
        lable: 'SM-W9023',
        value: 'Samsung W22',
      },
      {
        lable: 'SM-F7110',
        value: 'Samsung Z Flip3',
      },
      {
        lable: 'SM-F9260',
        value: 'Samsung Z Fold3',
      },
      {
        lable: 'SM-E5260',
        value: 'Samsung F52',
      },
      {
        lable: 'SM-A5260',
        value: 'Samsung Galaxy A52',
      },
      {
        lable: 'SM-G998U',
        value: 'Samsung Galaxy S21 Ultra',
      },
      {
        lable: 'SM-G9980',
        value: 'Samsung Galaxy S21 Ultra',
      },
      {
        lable: 'SM-G9910',
        value: 'Samsung S21',
      },
      {
        lable: 'SM-G9960',
        value: 'Samsung S21+',
      },
      {
        lable: 'SM-A326B',
        value: 'Samsung Galaxy A32',
      },
    ],
  },
];

第三步新建index.tsx应用 :mobile-detect

// 新建index.tsx 文件
import MobileDetect from 'mobile-detect';
import { judgeBrand, arrModal } from './model';
const index =()=>{
  useEffect(() => {
    onMobilePhone();
  }, []);
  const onMobilePhone = () => {
    console.log(userAgent, '获取userAgent信息');

    var md = new MobileDetect(userAgent);
    var os = md.os(); //获取系统
    // 获取华为
    if (userAgent.split(')')[0].includes('HMSCore')) {
      HMS = userAgent.split(')')[0].split('HMSCore')[0].split(';');
    }
    let model = HMS[HMS.length - 2];
    let val;
    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]);
          }
        });
        let os = +md.version('iPhone');
        // console.log(`${md.mobile()} IOS${os}`);
        // console.log(model, '鸡鸡', userAgent.toLowerCase());
        val = model;
      } 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/'));
      }

      arrModal.map((item) => {
        if (item.type == judgeBrand(userAgent.toLowerCase())) {
          item.modelNumber.map((vm) => {
            if (vm.lable == model.trim()) {
              val = vm.value;
            }
          });
        }
      });
    }
    // console.log(val);
    val = val ? val : '其他型号手机';
    localStorage.setItem('model', val);
    console.log('我model是', val);
  };
}
export default index;

H5获取手机型号,获取具体手机型号

 如有帮助请关注点赞,若有问题请留言文章来源地址https://www.toymoban.com/news/detail-506481.html

到了这里,关于H5获取手机型号,获取具体手机型号的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ios手机在app中调试h5页面

    网页开发在浏览器里调试很方便,但是在移动端开发调试,例如需要在app中打开,会用到一些bridge , 这时候就不能在浏览器调试。在app调试,如果每次都要发布到测试环境才能调试,那就会浪费很多时间。 可以通过charls来做一个代理 从而在手机app里调试h5页面 安装charles 安装

    2024年03月15日
    浏览(64)
  • 【Appium】测试时遇到手机内嵌H5页面的切换问题

    前言 :H5页面简单理解就是在手机内嵌套了一些网页格式的信息,可以让手机的应用看起来更丰富一些。 而当手机内嵌H5页面时,常规的app定位方法就没法使用了,我们需要先 切换 到H5页面才能进行下一步的定位,那该怎么操作呢,详细如下: 目录 一、确认app中哪个页面使

    2024年02月09日
    浏览(43)
  • uniapp/H5 获取手机桌面壁纸 (静态壁纸)

    找半天没找到相关的内容,自己捣鼓出来的,记录一下。 (比较可惜的是只能获取静态图片,动态壁纸就不知道了咋弄了) uniapp的话还可以参考一下如何用NJS获取手机桌面壁纸? - DCloud问答下面DCloud_heavensoft 大佬的一个回答 : “Native.js很多类型没有。用uts可以 https://uni

    2024年02月19日
    浏览(37)
  • h5调用手机摄像头获取图片用于人脸识别

    1、安卓手机获取前置摄像头,并在video标签显示 注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测不好用 2、苹果手机获取前置摄像头拍照上传,用于人脸识别 注:该方法在安卓手机也可使用 3、附件 //exif.js exif.js //rotate-photo.js rotate-photo.js

    2024年02月11日
    浏览(54)
  • H5 防止安卓手机软键盘弹出挤压页面导致变形的方法

    在做移动端h5页面时,安卓端软键盘会导致页面压缩变形的问题:(安卓端有问题,IOS端没问题) 安卓端:安卓中,如果将footer元素设置为position:fixed或absolute,因为软键盘会改变页面的高度(将页面顶上来),因此footer元素也跟着移动上来,导致页面变形; IOS端:苹果的软

    2024年02月13日
    浏览(50)
  • 微信小程序内嵌H5页面获取openid+分享功能

    主要实现功能:1.通过webview实现小程序内嵌H5页面                          2.在H5页面获取到用户的openid                          3.在H5页面实现分享获取到分享人的openid和被分享者的openid 代码实现: 1.通过webview实现小程序内嵌H5页面 传参:在地址后面加入的参数就是我

    2024年04月23日
    浏览(63)
  • H5 页面通过navigator.mediaDevices.getUserMedia调用手机摄像头拍照上传

    需求: 某知名化妆品牌,要做个在线问卷调查。需要试用着自拍上传 注:使用navigator.mediaDevices.getUserMedia 需要使用https请求协议否者视为不安全,无法访问,开发阶段需要将启动改为https 在package.json中 前端开发环境启动项目将http协议改为https协议    授权,默认前置,切换

    2024年02月11日
    浏览(58)
  • uniapp 之 uniapp app 与uniapp H5的通信 webview,以及处理H5页面的手机物理返回问题

    APP端: 引用 web-view     app给H5传参:通过h5地址传参 这个方法简单,就是直接通过src 地址后面通过 ? 拼接参数 app端 h5端通过uniapp生命周期函数 onLoad 接收参数     app给H5传参:通过方法 evalJS 传参 H5给app传参:通过 web-view 组件的 @message 绑定的方法 处理H5页面的手机物理返

    2024年01月16日
    浏览(49)
  • pc端项目的h5页面运行在手机浏览器使用vconsole查看页面元素、控制台、请求等信息

    使用vconsole来查看h5页面运行在手机浏览器上的页面元素、控制台、请求等信息 在vue项目中,也可以不需要使用npm安装即可使用 话不多说,直接把下面代码放到 body 标签中即可 直接把下面代码放到 body 标签中即可 放到根目录的index.html页面的body中,如下图

    2024年02月04日
    浏览(62)
  • 【H5页面嵌入到小程序或APP中实现手机号点击复制和拨号功能】

    在H5界面嵌入到小程序和移动应用(安卓和iOS)中实现手指点击手机号弹出弹窗,包含呼叫和复制选项,是可以实现的。下面我将为你提供一个基本的示例,并解释在小程序、安卓和iOS中要做的支持工作。 小程序: 在小程序中,由于安全和隐私的考虑,直接调用拨打电话功能

    2024年02月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包