JS获取手机型号|极客笔记

JS获取手机型号

在web开发中，有时候我们需要获取用户的设备信息，其中之一就是手机型号。通过获取手机型号，我们可以根据具体的设备来进行一些定制化的操作或者展示不同的内容。本文将详细介绍如何使用JavaScript来获取手机型号。

1. navigator.userAgent

在JavaScript中，我们通常会使用navigator.userAgent来获取用户代理字符串，通过解析这个字符串，我们可以获取到包括设备型号在内的一些设备信息。

let userAgent = navigator.userAgent;
console.log(userAgent);

上面的代码将会输出一串包含设备信息的字符串，例如：

Mozilla/5.0 (Linux; Android 9; SM-G9650 Build/PPR1.180610.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36

在这个字符串中，SM-G9650 就是手机的型号，不过不同设备的代号可能不一样，需要根据具体情况做一些判断处理。

2. 正则表达式匹配

为了方便地提取设备型号，我们可以使用正则表达式来匹配设备型号的信息。

let userAgent = navigator.userAgent;
let match = userAgent.match(/Android\s([^\s;]+)/);
if(match){
  let model = match[1];
  console.log(model);
} else {
  console.log('无法获取设备型号');
}

通过上面的代码，我们可以提取出设备型号，例如：

SM-G9650

3. 使用第三方库

除了自己写正则表达式来匹配设备型号外，也可以使用一些现成的第三方库，来实现更加方便快捷地获取设备信息。比如mobile-detect.js这个库就提供了一些常用的设备信息获取功能。

首先，我们需要引入这个库文件：

<script src="https://cdn.jsdelivr.net/npm/mobile-detect/dist/mobile-detect.min.js"></script>

然后，我们可以直接通过这个库来获取设备的具体信息：

let md = new MobileDetect(window.navigator.userAgent);
let model = md.mobile();
console.log(model);

使用这种方式，我们可以更加便捷地获取到设备的具体型号信息。

4. 测试

为了验证我们的代码是否可行，我们可以通过不同设备来测试一下。比如我们使用华为P30 Pro和iPhone X进行测试：

华为P30 Pro：华为 VOG-AL00 Build/HUAWEIVOG-AL00
iPhone X：iPhone X; CPU iPhone OS 13_3_1 like Mac OS X

通过上面的代码我们可以获取到正确的设备型号，这说明我们的获取设备型号的方式是可行的。

结语

通过上面的介绍，我们可以看到，通过JavaScript我们可以方便地获取到用户设备的型号信息，从而根据具体设备进行相应的操作。无论是通过解析navigator.userAgent字符串，还是使用第三方库，都可以实现快速准确地获取到设备型号。在实际开发中，可以根据用户的设备型号来做一些UI界面的适配或者功能的定制，提升用户体验。