devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

H5获取手机型号，获取具体手机型号_h5 获取手机信息

作者：很楠不爱3 | 2024-03-12 01:19:55

赞

踩

h5 获取手机信息

需求：需要读取系统手机型号，并显示出来。

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

 

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

下面是代码实现

第一步  安装mobile-detect   

yarn add mobile-detect -s

到package.json中查看

"mobile-detect": "^1.4.5",

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

  1. // 判断业务是否是 iphone、华为、小米、oppo、view、三星 打开
  2. export function judgeBrand(sUserAgent: any) {
  3.   var isIphone = sUserAgent.match(/iphone/i) == 'iphone';
  4.   var isHuawei = sUserAgent.match(/huawei/i) == 'huawei';
  5.   var isHonor = sUserAgent.match(/honor/i) == 'honor';
  6.   var isOppo = sUserAgent.match(/oppo/i) == 'oppo';
  7.   var isOppoR15 = sUserAgent.match(/pacm00/i) == 'pacm00';
  8.   var isVivo = sUserAgent.match(/vivo/i) == 'vivo';
  9.   var isXiaomi = sUserAgent.match(/mi\s/i) == 'mi ';
  10.   var isXiaomi2s = sUserAgent.match(/mix\s/i) == 'mix ';
  11.   var isRedmi = sUserAgent.match(/redmi/i) == 'redmi';
  12.   var isSamsung = sUserAgent.match(/sm-/i) == 'sm-';
  13.   var isLG = sUserAgent.match(/lg/i) == 'lg';
  14.   if (isIphone) {
  15.     return 'iPhone';
  16.   } else if (isHuawei || isHonor) {
  17.     return 'Huawei';
  18.   } else if (isOppo || isOppoR15) {
  19.     return 'Oppo';
  20.   } else if (isVivo) {
  21.     return 'vivo';
  22.   } else if (isXiaomi || isRedmi || isXiaomi2s) {
  23.     return 'mi';
  24.   } else if (isSamsung) {
  25.     return 'Samsung';
  26.   } else if (isLG) {
  27.     return 'LG';
  28.   } else {
  29.     return '其他型号手机';
  30.   }
  31. }
  32. export const arrModal = [
  33.   {
  34.     // 华为
  35.     type: 'Huawei',
  36.     modelNumber: [
  37.       {
  38.         lable: 'NOH-AN50',
  39.         value: '华为Mate40E Pro',
  40.       },
  41.       {
  42.         lable: 'NOH-AN50',
  43.         value: '华为Mate40E Pro',
  44.       },
  45.       {
  46.         lable: 'ABR-AL60',
  47.         value: '华为P50E',
  48.       },
  49.       {
  50.         lable: 'BRQ-AN00',
  51.         value: '华为nova8 Pro',
  52.       },
  53.       {
  54.         lable: 'JLN-AL00',
  55.         value: '华为nova 9 SE',
  56.       },
  57.       {
  58.         lable: 'CHA-AL80',
  59.         value: '华为nova 10z',
  60.       },
  61.       {
  62.         lable: 'MGA-AL00',
  63.         value: '华为畅享 50',
  64.       },
  65.       {
  66.         lable: 'NCO-AL00',
  67.         value: '华为nova 10',
  68.       },
  69.       {
  70.         lable: 'GLA-AL00',
  71.         value: '华为nova 10 Pro',
  72.       },
  73.       {
  74.         lable: 'TET-AN50',
  75.         value: '华为Mate Xs 2',
  76.       },
  77.       {
  78.         lable: 'RTE-AL00',
  79.         value: '华为nova 9 Pro',
  80.       },
  81.       {
  82.         lable: 'NAM-AL00',
  83.         value: '华为nova 9',
  84.       },
  85.       {
  86.         lable: 'BAL-AL80',
  87.         value: '华为P50 Pocket S',
  88.       },
  89.       {
  90.         lable: 'JAD-AL50',
  91.         value: '华为P50 Pro',
  92.       },
  93.       {
  94.         lable: 'NOH-AN50',
  95.         value: '华为Mate40E',
  96.       },
  97.       {
  98.         lable: 'OCE-AN00',
  99.         value: '华为Mate40',
  100.       },
  101.       {
  102.         lable: 'NOH-AN00',
  103.         value: '华为Mate40 Pro',
  104.       },
  105.       {
  106.         lable: 'NOP-AN00',
  107.         value: '华为Mate40 Pro+',
  108.       },
  109.       {
  110.         lable: 'ANA-AN00',
  111.         value: '华为P40',
  112.       },
  113.       {
  114.         lable: 'ANA-TN00',
  115.         value: '华为P40',
  116.       },
  117.       {
  118.         lable: 'ELS-AN00',
  119.         value: '华为P40 Pro',
  120.       },
  121.       {
  122.         lable: 'ELS-TN00',
  123.         value: '华为P40 Pro',
  124.       },
  125.       {
  126.         lable: 'ELS-AN10',
  127.         value: '华为P40 Pro Premium Edition',
  128.       },
  129.       {
  130.         lable: 'CET-AL60',
  131.         value: '华为 Mate 50E',
  132.       },
  133.       {
  134.         lable: 'BNE-AL00',
  135.         value: '华为 Mate 50',
  136.       },
  137.       {
  138.         lable: 'CTR-AL00',
  139.         value: '华为畅享 50 Pro',
  140.       },
  141.       {
  142.         lable: 'STK-AL00',
  143.         value: '华为畅享 10 Pro',
  144.       },
  145.       {
  146.         lable: 'CET-AL00',
  147.         value: '华为 Mate 50 RS',
  148.       },
  149.       {
  150.         lable: 'DCO-AL00',
  151.         value: '华为 Mate 50 Pro',
  152.       },
  153.       {
  154.         lable: 'JSC-AN00',
  155.         value: '华为nova 8 SE',
  156.       },
  157.       {
  158.         lable: 'ANG-AN00',
  159.         value: '华为nova 8',
  160.       },
  161.       {
  162.         lable: 'OCE-AN00',
  163.         value: '华为Mate40',
  164.       },
  165.       {
  166.         lable: 'NOH-AN00',
  167.         value: '华为Mate40 Pro',
  168.       },
  169.       {
  170.         lable: 'NOP-AN00',
  171.         value: '华为Mate40 Pro+',
  172.       },
  173.       {
  174.         lable: 'LIO-AL00',
  175.         value: '华为Mate30E Pro',
  176.       },
  177.       {
  178.         lable: 'CindyN-AN00',
  179.         value: '华为nova 7 SE',
  180.       },
  181.       {
  182.         lable: 'ELE-AL00',
  183.         value: '华为P30',
  184.       },
  185.       {
  186.         lable: 'VOG-AL10',
  187.         value: '	华为P30 Pro',
  188.       },
  189.       {
  190.         lable: 'HMA-AL00',
  191.         value: '华为Mate20',
  192.       },
  193.       {
  194.         lable: 'EML-AL00',
  195.         value: '华为P20',
  196.       },
  197.       {
  198.         lable: 'CLT-AL00',
  199.         value: '华为P20 Pro',
  200.       },
  201.       {
  202.         lable: 'LYA-AL00',
  203.         value: '华为Mate20 Pro',
  204.       },
  205.       {
  206.         lable: 'LIO-AN00',
  207.         value: '华为Mate30 Pro',
  208.       },
  209.       {
  210.         lable: 'VOG-AL00',
  211.         value: '华为P30 Pro',
  212.       },
  213.       {
  214.         lable: 'SEA-AL10',
  215.         value: '华为nova5 Pro',
  216.       },
  217.       {
  218.         lable: 'TAS-AN00',
  219.         value: '华为Mate30',
  220.       },
  221.       {
  222.         lable: 'TAS-AL00',
  223.         value: '华为Mate30',
  224.       },
  225.       {
  226.         lable: 'PAR-AL00',
  227.         value: '华为Nova 3',
  228.       },
  229.       {
  230.         lable: 'VCE-AL00',
  231.         value: '华为Nova 4',
  232.       },
  233.       {
  234.         lable: 'ADT-AN00',
  235.         value: '荣耀X40 GT',
  236.       },
  237.       {
  238.         lable: 'VNE-AN40',
  239.         value: '荣耀Play6C',
  240.       },
  241.       {
  242.         lable: 'FNE-AN00',
  243.         value: '荣耀70 Pro',
  244.       },
  245.       {
  246.         lable: 'HPB-AN00',
  247.         value: '荣耀70 Pro+',
  248.       },
  249.       {
  250.         lable: 'VNE-AN00',
  251.         value: '荣耀畅玩30',
  252.       },
  253.       {
  254.         lable: 'CMA-AN40',
  255.         value: '荣耀Play6T',
  256.       },
  257.       {
  258.         lable: 'LGE-AN20',
  259.         value: '荣耀Magic4 至臻版',
  260.       },
  261.       {
  262.         lable: 'TFY-AN40',
  263.         value: '荣耀Play6T Pro',
  264.       },
  265.       {
  266.         lable: 'LGE-AN00',
  267.         value: '荣耀Magic4',
  268.       },
  269.       {
  270.         lable: 'LGE-AN10',
  271.         value: '荣耀Magic4 Pro',
  272.       },
  273.       {
  274.         lable: 'TFY-AN40',
  275.         value: '荣耀60 SE',
  276.       },
  277.       {
  278.         lable: 'MGI-AN00',
  279.         value: '荣耀Magic V',
  280.       },
  281.       {
  282.         lable: 'DIO-AN00',
  283.         value: '荣耀X40i',
  284.       },
  285.       {
  286.         lable: 'ANY-AN00',
  287.         value: '荣耀X30',
  288.       },
  289.       {
  290.         lable: 'EDG-AN00',
  291.         value: '荣耀X30i',
  292.       },
  293.       {
  294.         lable: 'TFY-AN00',
  295.         value: '荣耀X30i',
  296.       },
  297.       {
  298.         lable: 'KKG-AN70',
  299.         value: '荣耀X30 Max',
  300.       },
  301.       {
  302.         lable: 'CMA-AN00',
  303.         value: '荣耀畅玩30 Plus',
  304.       },
  305.       {
  306.         lable: 'TNA-AN00',
  307.         value: '荣耀60 Pro',
  308.       },
  309.       {
  310.         lable: 'LSA-AN00',
  311.         value: '荣耀60',
  312.       },
  313.       {
  314.         lable: 'ELZ-AN10',
  315.         value: '荣耀Magic3 Pro',
  316.       },
  317.       {
  318.         lable: 'ELZ-AN20',
  319.         value: '荣耀Magic3 至臻版',
  320.       },
  321.       {
  322.         lable: 'JLH-AN00',
  323.         value: '荣耀50 SE',
  324.       },
  325.       {
  326.         lable: 'CHL-AN00',
  327.         value: '荣耀X20 SE',
  328.       },
  329.       {
  330.         lable: 'NTN-AN00',
  331.         value: '荣耀50',
  332.       },
  333.     ],
  334.   },
  335.   {
  336.     // 华为
  337.     type: 'vivo',
  338.     modelNumber: [
  339.       {
  340.         lable: 'V1731CA',
  341.         value: 'vivo Y73t',
  342.       },
  343.       {
  344.         lable: 'V2166BA',
  345.         value: 'vivo Y77e',
  346.       },
  347.       {
  348.         lable: 'V2219A',
  349.         value: 'vivo Y77',
  350.       },
  351.       {
  352.         lable: 'V2188A',
  353.         value: 'vivo T2x',
  354.       },
  355.       {
  356.         lable: 'V2170A',
  357.         value: 'vivo X Note',
  358.       },
  359.       {
  360.         lable: 'V2178A',
  361.         value: 'vivo X Fold',
  362.       },
  363.       {
  364.         lable: 'V2166A',
  365.         value: 'vivo Y33s',
  366.       },
  367.       {
  368.         lable: 'V2168A',
  369.         value: 'vivo Y10(t1)',
  370.       },
  371.       {
  372.         lable: 'V2229A',
  373.         value: 'vivo X Fold+',
  374.       },
  375.       {
  376.         lable: 'V2183A',
  377.         value: 'vivo X80',
  378.       },
  379.       {
  380.         lable: 'V2207A',
  381.         value: 'vivo S15 Pro',
  382.       },
  383.       {
  384.         lable: 'V2203A',
  385.         value: 'vivo S15',
  386.       },
  387.       {
  388.         lable: 'V2185A',
  389.         value: 'vivo X80 Pro',
  390.       },
  391.       {
  392.         lable: 'V2199A',
  393.         value: 'vivo S15e',
  394.       },
  395.       {
  396.         lable: 'V2199GA',
  397.         value: 'vivo S15 Pro',
  398.       },
  399.       {
  400.         lable: 'V2185A',
  401.         value: 'vivo X80 Pro',
  402.       },
  403.       {
  404.         lable: 'V2162A',
  405.         value: 'vivo S12',
  406.       },
  407.       {
  408.         lable: 'V2156A',
  409.         value: 'vivo Y55s',
  410.       },
  411.       {
  412.         lable: 'V2163A',
  413.         value: 'vivo S12 Pro',
  414.       },
  415.       {
  416.         lable: 'V2158A',
  417.         value: 'vivo Y32',
  418.       },
  419.       {
  420.         lable: 'V2123A',
  421.         value: 'vivo X70',
  422.       },
  423.       {
  424.         lable: 'V2156A',
  425.         value: 'vivo Y76s',
  426.       },
  427.       {
  428.         lable: 'V2130A',
  429.         value: 'vivo S10e',
  430.       },
  431.       {
  432.         lable: 'V2134A',
  433.         value: 'vivo X70 Pro',
  434.       },
  435.       {
  436.         lable: 'V2123A',
  437.         value: 'vivo X70',
  438.       },
  439.       {
  440.         lable: 'V2125A',
  441.         value: 'vivo X70 Pro+',
  442.       },
  443.       {
  444.         lable: 'V2111A',
  445.         value: 'vivo Y53s',
  446.       },
  447.       {
  448.         lable: 'V2121A',
  449.         value: 'vivo S10 Pro',
  450.       },
  451.       {
  452.         lable: 'V2121A',
  453.         value: 'vivo S10',
  454.       },
  455.       {
  456.         lable: 'V2059A',
  457.         value: 'vivo X60',
  458.       },
  459.       {
  460.         lable: 'V2068A',
  461.         value: 'vivo Y31s',
  462.       },
  463.       {
  464.         lable: 'V2056A',
  465.         value: 'vivo X60t Pro+',
  466.       },
  467.       {
  468.         lable: 'V2057A',
  469.         value: 'vivo Y52s',
  470.       },
  471.       {
  472.         lable: 'V2072A',
  473.         value: 'vivo S9',
  474.       },
  475.       {
  476.         lable: 'V2048A',
  477.         value: 'vivo S9e',
  478.       },
  479.       {
  480.         lable: 'V2034A',
  481.         value: 'vivo Y30g',
  482.       },
  483.       {
  484.         lable: 'V2085A',
  485.         value: 'vivo X60t',
  486.       },
  487.       {
  488.         lable: 'V2080A',
  489.         value: 'vivo S7t',
  490.       },
  491.       {
  492.         lable: 'V2034A',
  493.         value: 'vivo Y30',
  494.       },
  495.       {
  496.         lable: 'V2031EA',
  497.         value: 'vivo S7e',
  498.       },
  499.       {
  500.         lable: 'V2031A',
  501.         value: 'vivo Y73s',
  502.       },
  503.       {
  504.         lable: 'V2020A',
  505.         value: 'vivo Y3s',
  506.       },
  507.       {
  508.         lable: 'TAS-AN00',
  509.         value: 'vivo S7',
  510.       },
  511.     ],
  512.   },
  513.   {
  514.     type: 'Samsung',
  515.     modelNumber: [
  516.       {
  517.         lable: 'SM-G965U',
  518.         value: 'Samsung S9+',
  519.       },
  520.       {
  521.         lable: 'SM-W9023',
  522.         value: 'Samsung W23',
  523.       },
  524.       {
  525.         lable: 'SM-W7023',
  526.         value: 'Samsung W23 Flip',
  527.       },
  528.       {
  529.         lable: 'SM-S9010',
  530.         value: 'Samsung Galaxy S22',
  531.       },
  532.       {
  533.         lable: 'SM-S9060',
  534.         value: 'Samsung Galaxy S22 Plus',
  535.       },
  536.       {
  537.         lable: 'SM-S9080',
  538.         value: 'Samsung Galaxy S22 Note',
  539.       },
  540.       {
  541.         lable: 'SM-G9900',
  542.         value: 'Samsung Galaxy S21 FE',
  543.       },
  544.       {
  545.         lable: 'SM-G998U',
  546.         value: 'Samsung Galaxy S21 Ultra',
  547.       },
  548.       {
  549.         lable: 'SM-F7210',
  550.         value: 'Samsung Galaxy Z Flip4',
  551.       },
  552.       {
  553.         lable: 'SM-F9360',
  554.         value: 'Samsung Galaxy Z Fold4',
  555.       },
  556.       {
  557.         lable: 'SM-W9023',
  558.         value: 'Samsung W22',
  559.       },
  560.       {
  561.         lable: 'SM-F7110',
  562.         value: 'Samsung Z Flip3',
  563.       },
  564.       {
  565.         lable: 'SM-F9260',
  566.         value: 'Samsung Z Fold3',
  567.       },
  568.       {
  569.         lable: 'SM-E5260',
  570.         value: 'Samsung F52',
  571.       },
  572.       {
  573.         lable: 'SM-A5260',
  574.         value: 'Samsung Galaxy A52',
  575.       },
  576.       {
  577.         lable: 'SM-G998U',
  578.         value: 'Samsung Galaxy S21 Ultra',
  579.       },
  580.       {
  581.         lable: 'SM-G9980',
  582.         value: 'Samsung Galaxy S21 Ultra',
  583.       },
  584.       {
  585.         lable: 'SM-G9910',
  586.         value: 'Samsung S21',
  587.       },
  588.       {
  589.         lable: 'SM-G9960',
  590.         value: 'Samsung S21+',
  591.       },
  592.       {
  593.         lable: 'SM-A326B',
  594.         value: 'Samsung Galaxy A32',
  595.       },
  596.     ],
  597.   },
  598. ];

第三步新建index.ts检测函数文件

  1. export const detectMobile = () => {
  2.   const userAgent = window.navigator.userAgent
  3.   const md = new MobileDetect(userAgent)
  4.   const os = md.os() //获取系统
  5.   let HMS: any = ''
  6.   // 获取华为
  7.   if (userAgent.split(')')[0].includes('HMSCore')) {
  8.     HMS = userAgent.split(')')[0].split('HMSCore')[0].split(';')
  9.   }
  10.   let model = HMS[HMS.length - 2]
  11.   let val
  12.   if (os == 'iOS') {
  13.     //ios系统的处理
  14.     // @ts-ignore
  15.     model = md.mobile()
  16.     // console.log(md.mobile(), os, '获取系统', os == 'iOS');
  17.     if (model == 'iPhone') {
  18.       const iphoneArr = [
  19.         ['430,932,3', 'A15', 'iPhone 14 Pro Max'],
  20.         ['393,852,3', 'A15', 'iPhone 14 Pro'],
  21.         ['375,812,3', 'A15', 'iPhone 13(12) min'],
  22.         ['428,926,3', 'A14', 'iPhone 14(12/13) Plus'],
  23.         ['390,844,3', 'A14', 'iPhone 14(12/13)'],
  24.         ['414,896,3', 'A13', 'iPhone 11 Pro Max(Xs Max)'],
  25.         ['375,812,3', 'A13', 'iPhone 11 Pro(X/Xs)'],
  26.         ['414,896,2', 'A13', 'iPhone 11(XR)'],
  27.         ['414,736,3', 'A12', 'iPhone 8(7/6s) Plus'],
  28.         ['375,667,2', 'A11', 'iPhone 8(7/6)'],
  29.         ['320,568,2', 'A11', 'iPhone 5(s/se)'],
  30.         ['320,480,2', 'A10', 'iPhone 4(s)']
  31.       ]
  32.  
  33.       // 获取GPU信息
  34.       const canvas = document.createElement('canvas'),
  35.         gl = canvas.getContext('experimental-webgl'),
  36.         // @ts-ignore
  37.         debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
  38.       // @ts-ignore
  39.  
  40.       const iphoneGPU = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
  41.       const width = window.screen.width
  42.       const height = window.screen.height
  43.       const devicePixelRatio = window.devicePixelRatio
  44.       console.log(width, height, devicePixelRatio)
  45.  
  46.       const baseInfo = width + ',' + height + ',' + devicePixelRatio
  47.       iphoneArr.some((item) => {
  48.         if (item[0] === baseInfo) {
  49.           model = item[2]
  50.           console.log('iphoneGPU', iphoneGPU == item[1])
  51.         }
  52.       })
  53.       const os = +md.version('iPhone')
  54.       // console.log(`${md.mobile()} IOS${os}`);
  55.       // console.log(model, '鸡鸡', userAgent.toLowerCase());
  56.       val = model
  57.     } else {
  58.       model = 'iPad'
  59.     }
  60.   } else if (os == 'AndroidOS') {
  61.     //Android系统的处理
  62.     let j
  63.     const sss = userAgent.split(';')
  64.     for (let i = 0; i < sss.length; i++) {
  65.       if (sss[i].indexOf('Build/') > 0) {
  66.         j = i
  67.         break
  68.       }
  69.     }
  70.     // @ts-ignore
  71.     if (j > -1) {
  72.       // @ts-ignore
  73.       model = sss[j].substring(0, sss[j].indexOf('Build/'))
  74.     }
  75.  
  76.     console.log('model__', model)
  77.  
  78.     arrModal.map((item) => {
  79.       if (item.type == judgeBrand(userAgent.toLowerCase())) {
  80.         item.modelNumber.map((vm) => {
  81.           if (vm.lable == model.trim()) {
  82.             val = vm.value
  83.           }
  84.         })
  85.       }
  86.     })
  87.   }
  88.   val = val ? val : '其他型号手机'
  89.   console.log('手机型号为：', val)
  90.   return val
  91. }
  92. detectMobile()

 

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/221095
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号