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

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

分析实现：因为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 存放数据

// 判断业务是否是 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-ignoremodel = 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-ignoredebugInfo = gl.getExtension('WEBGL_debug_renderer_info');// @ts-ignorelet 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-ignoreif (j > -1) {// @ts-ignoremodel = 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获取手机型号，获取具体手机型号相关推荐

h5调用手机摄像头获取图片用于人脸识别
h5调用手机摄像头获取图片用于人脸识别 1.安卓手机获取前置摄像头,并在video标签显示注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测 ...
h5打开麦克风权限录音_手机使用应用时总是需要获取权限，这3个权限不能随意给，望周知...
我们在使用手机应用时,总是会收到此应用需要某些权限的弹窗提示,大部分所选择的选项都是全部允许,但是我们这番操作真的正确吗? 当我们允许手机应用获取这些权限后,就说明此应用能够通过我们的手机获取我们手机 ...
linux 导入txt_手机混用闪存到底是真是假：教你查手机闪存型号|闪存|手机|linux|ufs|zip...
最近,网上传言某手机混用闪存,将UFS 3.0和 UFS 3.1的闪存混用在了同一型号的机器上,买不同容量的手机,闪存协议不一样.光从这个描述来看,这做法相当不厚道,消费者买手机等于抽奖.但这到底是不 ...
手机型号云服务器,手机型号查询接口
手机型号查询接口内容精选换一换通过调用云手机服务提供的接口,您可以完整地使用云手机的所有功能.例如查询云手机列表.重启云手机.为云手机推送文件. 华为云帮助中心,为用户提供产品简介.价格说明.购 ...
android root权限获取失败,安卓手机为什么获取Root权限失败？Root失败是什么原因...
安卓手机为什么获取Root权限失败?新手机.旧手机里面安装的最多的是什么APP?当然是预装!是的,相信很多用户都深有体会,当这种情况无法再忍受的时候,我们只能通过Root或者刷机解决问题,但只要用的人 ...
android临时root权限获取失败,安卓手机为何获取Root权限失败？分析手机Root失败的原因是什么？...
如今,手机预装的APP应用程序实在太多,对于有系统纯净强迫症的用户来说,拿到手机第一件事就是折腾,通过Root或者刷机解决问题,那么我们在获取ROOT权限的时候可能会遇到失败,那么安卓手机为何获取Ro ...
手机显示获取服务器信息,获取手机服务器
获取手机服务器内容精选换一换接口名称InstallApkInstallApk功能描述在云手机中安装apk.系统会将指定的apk文件下载后直接安装到云手机中.一次只支持安装一个apk.该接口为异步 ...
关于android获取手机号码(主要是移动手机)
转载+整理(尚未找到原文链接,我参考与http://blog.csdn.net/sunny2come/article/details/8290023) 首先手机号码不是所有的都能获取,只是有很少一部分 ...
获取android的SDK或者手机目录路径
获取android的SDK或者手机目录路径 Google为我们提供了API来获取SDK或者手机目录路径: 1.获取SD卡目录 File file1 = Environment.getExternalS ...
【Android工具】安卓手机轻松获取硬件数据和状态信息
可以获取的硬件信息和软件如上图所示. 硬件中的传感器比较好玩,可以获取手机上所有传感器的数据,还能绘制出变化曲线图总体来说功能比较多,软件界面也非常干净,就是没有移动网络信号和wifi网络信号强度的 ...

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

H5获取手机型号，获取具体手机型号相关推荐

最新文章

热门文章