正文

掌握JS技巧，轻松识别手机型号：一招教你轻松获取用户手机品牌与型号

/0 浏览量
0516

在网页开发中，有时候我们需要根据用户的手机型号来提供特定的功能或者优化用户体验。JavaScript 提供了一种简单的方法来获取用户的手机品牌和型号。下面，我将详细讲解如何使用 JavaScript 来实现这一功能。

获取用户设备信息

首先，我们需要了解，大多数现代浏览器都支持 navigator.userAgent 属性，该属性包含了用户浏览器的信息，包括操作系统、浏览器名称和版本等。通过解析这些信息，我们可以大致判断用户的手机品牌和型号。

解析用户代理字符串

用户代理字符串（User Agent String）是浏览器向服务器发送的包含浏览器类型、操作系统、版本和其他信息的字符串。下面是一个示例的用户代理字符串：

Mozilla/5.0 (Linux; Android 10; SM-A505FN Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.152 Mobile Safari/537.36

我们可以通过以下步骤来解析这个字符串：

  1. 提取操作系统：通过查找 “Android” 或 “iOS” 等关键词来确定操作系统。
  2. 提取手机品牌：根据操作系统，进一步提取品牌信息。例如，对于 Android 设备，我们可能需要提取 “SM-A505FN” 部分。
  3. 提取手机型号：继续解析品牌信息，提取具体的型号。

JavaScript 代码示例

以下是一个简单的 JavaScript 函数，用于解析用户代理字符串并返回手机品牌和型号：

function getDeviceInfo() {
  var userAgent = navigator.userAgent;
  var deviceInfo = {};

  if (/android/i.test(userAgent)) {
    deviceInfo.os = 'Android';
    var brandMatch = userAgent.match(/(SAMSUNG|LG|HTC|SONY|Xiaomi|OPPO|VIVO|OnePlus|Huawei|Meizu|Nokia|Motorola|ASUS|BlackBerry|Lenovo|ZTE|Samsung)/i);
    deviceInfo.brand = brandMatch ? brandMatch[0] : 'Unknown';
    var modelMatch = userAgent.match(/(SM|LG|HTC|SAMSUNG|LG|HTC|SONY|Xiaomi|OPPO|VIVO|OnePlus|Huawei|Meizu|Nokia|Motorola|ASUS|BlackBerry|Lenovo|ZTE|Samsung)\s[A-Z0-9]+/i);
    deviceInfo.model = modelMatch ? modelMatch[0].replace(deviceInfo.brand, '').trim() : 'Unknown';
  } else if (/iphone|ipad|ipod/i.test(userAgent)) {
    deviceInfo.os = 'iOS';
    var modelMatch = userAgent.match(/(iPhone|iPad|iPad Pro|iPad Air|iPad Mini|iPhone X|iPhone 11|iPhone 12|iPhone 13|iPhone SE)/i);
    deviceInfo.brand = 'Apple';
    deviceInfo.model = modelMatch ? modelMatch[0] : 'Unknown';
  } else {
    deviceInfo.os = 'Unknown';
    deviceInfo.brand = 'Unknown';
    deviceInfo.model = 'Unknown';
  }

  return deviceInfo;
}

console.log(getDeviceInfo());

这段代码首先检查用户代理字符串中是否包含 “android” 或 “iphone” 等关键词，然后根据不同的操作系统提取品牌和型号信息。如果无法识别，则返回 “Unknown”。

总结

通过以上方法，我们可以轻松地使用 JavaScript 获取用户的手机品牌和型号。这可以帮助我们在网页开发中提供更丰富的用户体验。当然，需要注意的是，用户代理字符串可能会被篡改，因此这种方法并不能保证100%的准确性。

-- 展开阅读全文 --