js怎么判断打开的是电脑还是手机

通过检测用户代理字符串、使用屏幕宽度检测、结合现代浏览器的特性，JavaScript可以有效判断打开的是电脑还是手机。其中，结合用户代理字符串是最常用且可靠的方法。

用户代理字符串检测

通过用户代理字符串（User-Agent）可以非常准确地判断设备类型。用户代理字符串是浏览器发送给服务器的一组信息，用于识别客户端使用的设备和浏览器。以下是具体实现方式：

function detectDevice() {
    const userAgent = navigator.userAgent.toLowerCase();
    if (userAgent.match(/mobile/i)) {
        return 'Mobile';
    } else {
        return 'Desktop';
    }
}
console.log(detectDevice());

详细描述：用户代理字符串包含大量信息，能够精确识别设备类型。通过匹配常见的移动设备标识符（如 "mobile"、"android"、"iphone" 等），我们可以确定设备是移动设备还是桌面设备。这种方法具有高度的准确性，但需要定期更新匹配规则，以应对新设备和浏览器的发布。

屏幕宽度检测

另一种判断方法是基于屏幕宽度。移动设备通常具有较小的屏幕宽度，桌面设备则较大。因此，可以通过检测屏幕宽度来区分设备类型。

function detectDeviceByScreenWidth() {
    if (window.innerWidth <= 768) {
        return 'Mobile';
    } else {
        return 'Desktop';
    }
}
console.log(detectDeviceByScreenWidth());

结合两种方法

为了提高准确性，可以结合用户代理字符串和屏幕宽度检测两种方法：

function detectDevice() {
    const userAgent = navigator.userAgent.toLowerCase();
    const isMobile = userAgent.match(/mobile/i) || window.innerWidth <= 768;
    return isMobile ? 'Mobile' : 'Desktop';
}
console.log(detectDevice());

一、用户代理字符串检测的详细介绍

1、什么是用户代理字符串

用户代理字符串是浏览器发送给服务器的一组信息，用于标识客户端使用的设备和浏览器。它包含了操作系统、浏览器版本、设备类型等信息。以下是一个典型的用户代理字符串示例：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

2、如何解析用户代理字符串

解析用户代理字符串需要了解常见的标识符，例如 "mobile"、"android"、"iphone" 等。通过正则表达式匹配这些标识符，我们可以判断设备类型。

function detectDevice() {
    const userAgent = navigator.userAgent.toLowerCase();
    if (userAgent.match(/mobile/i)) {
        return 'Mobile';
    } else {
        return 'Desktop';
    }
}

3、常见的用户代理字符串标识符

不同设备和浏览器具有不同的用户代理字符串标识符。以下是一些常见的标识符：

iPhone: iPhone、iOS
Android: Android
iPad: iPad
Windows Phone: Windows Phone
桌面设备: Windows NT、Macintosh

4、用户代理字符串检测的优缺点

优点：

高准确性：用户代理字符串包含丰富的信息，可以精确识别设备类型。
广泛适用：适用于各种浏览器和设备。

缺点：

依赖性：用户代理字符串依赖浏览器发送的信息，可能会被伪造。
维护成本：需要定期更新匹配规则，以应对新设备和浏览器的发布。

二、屏幕宽度检测的详细介绍

1、什么是屏幕宽度

屏幕宽度是指设备屏幕的宽度，通常以像素为单位。移动设备通常具有较小的屏幕宽度，桌面设备则较大。因此，可以通过检测屏幕宽度来区分设备类型。

2、如何通过屏幕宽度检测设备类型

通过 JavaScript 的 window.innerWidth 属性可以获取当前窗口的宽度。根据宽度值，可以判断设备类型。例如，通常将 768 像素作为区分移动设备和桌面设备的临界值。

function detectDeviceByScreenWidth() {
    if (window.innerWidth <= 768) {
        return 'Mobile';
    } else {
        return 'Desktop';
    }
}

3、屏幕宽度检测的优缺点

优点：

简单易用：代码简单，易于实现。
实时检测：可以实时检测屏幕宽度，适应窗口大小的变化。

缺点：

准确性有限：部分设备（如平板电脑）可能具有较大屏幕宽度，但仍属于移动设备。
依赖屏幕分辨率：不同设备的屏幕分辨率不同，可能导致误判。

三、结合用户代理字符串和屏幕宽度检测的优势

结合用户代理字符串和屏幕宽度检测两种方法，可以提高设备类型判断的准确性。用户代理字符串提供了详细的设备信息，而屏幕宽度检测可以实时适应窗口大小的变化。通过结合这两种方法，可以更准确地判断设备类型。

function detectDevice() {
    const userAgent = navigator.userAgent.toLowerCase();
    const isMobile = userAgent.match(/mobile/i) || window.innerWidth <= 768;
    return isMobile ? 'Mobile' : 'Desktop';
}

四、其他辅助方法

除了用户代理字符串和屏幕宽度检测，还可以结合其他方法进一步提高判断的准确性：

1、触摸事件检测

移动设备通常支持触摸事件，而桌面设备则不支持。通过检测触摸事件的支持情况，可以辅助判断设备类型。

function detectDeviceByTouch() {
    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    return hasTouch ? 'Mobile' : 'Desktop';
}

2、设备方向检测

移动设备通常支持设备方向检测（如横屏和竖屏），而桌面设备则不支持。通过检测设备方向的支持情况，可以辅助判断设备类型。

function detectDeviceByOrientation() {
    const supportsOrientation = 'orientation' in window;
    return supportsOrientation ? 'Mobile' : 'Desktop';
}

五、综合判断设备类型

综合上述方法，可以实现更加准确的设备类型判断：

function detectDevice() {
    const userAgent = navigator.userAgent.toLowerCase();
    const isMobile = userAgent.match(/mobile/i) || window.innerWidth <= 768;
    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const supportsOrientation = 'orientation' in window;
    if (isMobile || hasTouch || supportsOrientation) {
        return 'Mobile';
    } else {
        return 'Desktop';
    }
}

六、实际应用场景

1、响应式设计

在响应式设计中，根据设备类型加载不同的样式和布局，以提供最佳的用户体验。通过设备类型判断，可以动态加载适合当前设备的 CSS 和 JavaScript 文件。

const deviceType = detectDevice();
if (deviceType === 'Mobile') {
    // 加载移动设备样式和脚本
    loadMobileStylesAndScripts();
} else {
    // 加载桌面设备样式和脚本
    loadDesktopStylesAndScripts();
}

2、自适应图片加载

根据设备类型加载不同分辨率的图片，以提高页面加载速度和用户体验。移动设备加载低分辨率图片，桌面设备加载高分辨率图片。

const deviceType = detectDevice();
const imageElement = document.getElementById('responsive-image');
if (deviceType === 'Mobile') {
    imageElement.src = 'path/to/mobile-image.jpg';
} else {
    imageElement.src = 'path/to/desktop-image.jpg';
}

3、优化性能

根据设备类型优化性能，例如在移动设备上禁用某些高消耗资源的功能或特效，以提高页面加载速度和响应速度。

const deviceType = detectDevice();
if (deviceType === 'Mobile') {
    // 禁用高消耗资源的功能或特效
    disableHighConsumptionFeatures();
}

七、总结

通过用户代理字符串检测、屏幕宽度检测、触摸事件检测和设备方向检测等多种方法，可以准确判断设备类型。结合这些方法，可以为不同设备提供最佳的用户体验和性能优化。在实际应用中，根据具体需求选择合适的检测方法，并综合应用多种方法，以提高判断的准确性和可靠性。

推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，以提高团队协作效率和项目管理效果。