设备侦探：用JavaScript轻松识别苹果与安卓

作者：admin 发表于：2025-02-26

要判断当前设备是苹果（iOS）还是安卓（Android），可以通过JavaScript来检测用户代理（User Agent）字符串。用户代理字符串包含了关于浏览器和操作系统的信息。以下是一个详细的示例代码，展示了如何通过JavaScript来判断设备类型，并附带解释和案例。

1. 获取用户代理字符串

首先，我们需要获取浏览器的用户代理字符串。可以通过navigator.userAgent来获取。

const userAgent = navigator.userAgent;

2. 判断设备类型

接下来，我们可以通过检查用户代理字符串中是否包含特定的关键字来判断设备是苹果（iOS）还是安卓（Android）。

判断是否为iOS设备

iOS设备的用户代理字符串通常包含以下关键字之一：

iPhone
iPad
iPod
Macintosh（对于某些iOS设备，如iPad，可能会显示为Macintosh）

function isIOS() {
    const userAgent = navigator.userAgent;
    return /iPhone|iPad|iPod|Macintosh/.test(userAgent);
}

判断是否为Android设备

Android设备的用户代理字符串通常包含以下关键字：

Android

function isAndroid() {
    const userAgent = navigator.userAgent;
    return /Android/.test(userAgent);
}

3. 综合判断

我们可以将上述两个函数结合起来，综合判断设备类型。

function detectDeviceType() {
    if (isIOS()) {
        return 'iOS';
    } else if (isAndroid()) {
        return 'Android';
    } else {
        return 'Unknown';
    }
}

4. 使用案例

假设我们有一个网页，需要根据设备类型显示不同的内容或执行不同的操作。我们可以使用上述函数来实现这一功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detect Device Type</title>
</head>
<body>
    <h1>Device Type Detection</h1>
    <p id="deviceType"></p>

    <script>
        function isIOS() {
            const userAgent = navigator.userAgent;
            return /iPhone|iPad|iPod|Macintosh/.test(userAgent);
        }

        function isAndroid() {
            const userAgent = navigator.userAgent;
            return /Android/.test(userAgent);
        }

        function detectDeviceType() {
            if (isIOS()) {
                return 'iOS';
            } else if (isAndroid()) {
                return 'Android';
            } else {
                return 'Unknown';
            }
        }

        const deviceType = detectDeviceType();
        document.getElementById('deviceType').textContent = `Your device is: ${deviceType}`;
    </script>
</body>
</html>