手机端如何用js判断手机型号

判断手机型号时，可以使用User-Agent字符串、利用特定的API、或者使用第三方库。其中，使用User-Agent字符串是最常见的方法。通过分析User-Agent字符串，可以获取设备的详细信息，如品牌、型号和操作系统版本。以下是详细的介绍和操作步骤。

一、User-Agent字符串解析

1、获取User-Agent字符串

User-Agent字符串包含了关于设备和浏览器的信息。通过JavaScript，可以轻松获取它。在手机端，可以使用以下代码获取User-Agent字符串：

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

2、解析User-Agent字符串

不同设备的User-Agent字符串格式不同，通过解析User-Agent字符串，可以判断出设备的品牌和型号。以下是一些常见的User-Agent字符串示例：

iPhone:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1

Android:

Mozilla/5.0 (Linux; Android 10; SM-G973F Build/QP1A.190711.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.157 Mobile Safari/537.36

3、编写解析函数

编写一个函数来解析User-Agent字符串，并提取出设备的品牌和型号：

function getDeviceModel(userAgent) {
    let device = {};
    if (/iPhone/.test(userAgent)) {
        device.brand = "Apple";
        let modelMatch = userAgent.match(/iPhone OS (d+_d+)/);
        device.model = modelMatch ? `iPhone (iOS ${modelMatch[1].replace('_', '.')})` : "Unknown iPhone";
    } else if (/Android/.test(userAgent)) {
        device.brand = "Android";
        let modelMatch = userAgent.match(/Androids[d.]+;s([^s;]+)/);
        device.model = modelMatch ? modelMatch[1] : "Unknown Android Device";
    } else {
        device.brand = "Unknown";
        device.model = "Unknown Device";
    }
    return device;
}
let deviceInfo = getDeviceModel(navigator.userAgent);
console.log(`Brand: ${deviceInfo.brand}, Model: ${deviceInfo.model}`);

二、利用特定的API

一些现代浏览器提供了特定的API来获取设备信息。例如，使用JavaScript的navigator.userAgentData API，可以获得更多关于设备的信息。

1、检查浏览器支持

首先，检查浏览器是否支持navigator.userAgentData：

if (navigator.userAgentData) {
    console.log("navigator.userAgentData is supported");
} else {
    console.log("navigator.userAgentData is not supported");
}

2、获取品牌和型号

使用navigator.userAgentData API获取设备品牌和型号：

if (navigator.userAgentData) {
    navigator.userAgentData.getHighEntropyValues(['platform', 'model'])
        .then(ua => {
            console.log(`Brand: ${ua.platform}, Model: ${ua.model}`);
        });
} else {
    console.log("navigator.userAgentData is not supported");
}

三、使用第三方库

使用第三方库如device-detector-js可以简化设备检测的过程。这些库提供了现成的解析函数和数据来检测设备信息。

1、安装库

首先，通过npm或yarn安装device-detector-js库：

npm install device-detector-js

2、使用库检测设备

使用该库检测设备品牌和型号：

const DeviceDetector = require('device-detector-js');
const deviceDetector = new DeviceDetector();
const userAgent = navigator.userAgent;
const device = deviceDetector.parse(userAgent);
console.log(device);

四、总结

在手机端使用JavaScript判断手机型号的方法主要包括解析User-Agent字符串、利用特定的API以及使用第三方库。解析User-Agent字符串是最常见的方法，通过分析字符串的内容，可以获取设备的详细信息。利用特定API如navigator.userAgentData可以提供更高精度的信息，而使用第三方库如device-detector-js则可以简化检测过程。无论采用哪种方法，都需要根据实际需求和浏览器支持情况选择合适的方案。

通过上述方法，不仅可以判断设备的品牌和型号，还可以为用户提供更个性化的服务和优化的用户体验。准确的设备检测对于移动端开发和测试具有重要意义。