JS 判断手机端还是 PC 端|极客笔记

JS 判断手机端还是 PC 端

在前端开发中，我们经常需要根据用户设备的类型来展现不同的页面或功能。在这种情况下，我们可以通过 JavaScript 来判断用户的设备是手机端还是 PC 端，从而动态地为用户提供不同的体验。

通过 UserAgent 判断设备类型

一种常见的方法是通过浏览器提供的 UserAgent 字符串来判断用户的设备类型。UserAgent 包含了浏览器的信息以及用户的设备信息，通过解析 UserAgent，我们可以获取到用户所使用的设备类型。

下面是一个简单的 JavaScript 函数，用来判断用户的设备类型：

function detectDevice() {
    const userAgent = navigator.userAgent;

    if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent)) {
        return 'Mobile';
    } else if (/(Android)/i.test(userAgent)) {
        return 'Mobile';
    } else {
        return 'PC';
    }
}

// 测试
console.log(detectDevice());

在这个函数中，我们首先获取到了用户的 UserAgent 字符串，然后通过正则表达式匹配 iPhone、iPad、iPod、iOS 和 Android 这些关键字来判断用户的设备类型。如果匹配到其中之一，则返回 Mobile，否则返回 PC。

通过屏幕宽度判断设备类型

除了通过 UserAgent 来判断设备类型外，我们还可以通过浏览器的屏幕宽度来判断用户的设备是手机端还是 PC 端。通常来说，手机端的屏幕宽度会比 PC 端窄很多。

下面是一个通过屏幕宽度来判断设备类型的 JavaScript 函数：

function detectDeviceByScreenWidth() {
    const screenWidth = window.innerWidth;

    if (screenWidth < 768) {
        return 'Mobile';
    } else {
        return 'PC';
    }
}

// 测试
console.log(detectDeviceByScreenWidth());

在这个函数中，我们通过 window.innerWidth 来获取当前浏览器窗口的宽度，然后根据不同的阈值（这里以 768px 为例）来判断用户的设备类型。

结合两种方法判断设备类型

一种更加健壮的方法是将两种判断方式结合起来，从而提高判断设备类型的准确性。例如，我们可以先通过 UserAgent 判断用户的设备类型，然后再结合屏幕宽度来做进一步判断。

下面是一个结合两种方法来判断设备类型的 JavaScript 函数：

function detectDeviceCombined() {
    const userAgent = navigator.userAgent;
    const screenWidth = window.innerWidth;

    if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent) || /(Android)/i.test(userAgent)) {
        return 'Mobile';
    } else if (screenWidth < 768) {
        return 'Mobile';
    } else {
        return 'PC';
    }
}

// 测试
console.log(detectDeviceCombined());

在这个函数中，我们先通过 UserAgent 判断用户的设备是否为手机端，如果是手机端，则直接返回 Mobile；否则，再通过屏幕宽度来判断用户的设备类型。