如何检查正在使用我的网站的设备是否是移动用户

我只想检查正在使用我的网站的设备是否在移动设备或任何其他设备上。这是一个快速的问题,我希望快速回答​​。

stack overflow How can I check if the device, which is using my website, is a mobile user or not
原文答案

答案:

作者头像

如果您尝试查看用户的设备是否是移动设备,MDN 文档建议在 navigator(或浏览器)对象中查找属性 maxTouchPoints 并查看值是否为 > 0

过去,这通常使用 User Agent Sniffing ( Read more here ) 来完成,即通过浏览器发送的用户代理标头进入 navigator.userAgent 属性以查看它是否包含某些关键字。然而,这种方法有局限性,并且可能无法始终告诉用户使用的是正确类型的设备,因为当今许多设备支持不同的浏览器和功能,反之亦然。

使用用户代理嗅探(今天不推荐,应仅用作后备)

var hasTouchScreen = false;

var UA = navigator.userAgent;
        hasTouchScreen = (
            /b(BlackBerry|webOS|iPhone|IEMobile)b/i.test(UA) ||
            /b(Android|Windows Phone|iPad|iPod)b/i.test(UA)
        ); 

if (hasTouchScreen) {
    // Device is likely mobile, so do stuff for mobile devices here.
}

使用 maxTouchPoints 属性检查 > 0 对象中的 navigator (推荐 MDN 文档)

var hasTouchScreen = false;

if ("maxTouchPoints" in navigator) {
    hasTouchScreen = navigator.maxTouchPoints > 0;
} 

if (hasTouchScreen) {
    // Device is likely mobile, so do stuff for mobile devices here.
}

请注意,并非所有浏览器都支持该规范,因此导航器对象可能没有属性 maxTouchPoints 或者某些移动设备可能具有大屏幕,某些桌面设备可能具有小触摸屏,或者某些人可能使用智能电视等等。因此,进行此检查的更好方法是将上面的代码段与一些后备组合起来:

结合使用以前的方法和后备方法来检测移动设备的更好方法(Most Robust Method,MDN Docs 推荐)

var hasTouchScreen = false;

if ("maxTouchPoints" in navigator) {
    hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
    hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
    var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
    if (mQ && mQ.media === "(pointer:coarse)") {
        hasTouchScreen = !!mQ.matches;
    } else if ('orientation' in window) {
        hasTouchScreen = true; // deprecated, but good fallback
    } else {
        // Only as a last resort, fall back to user agent sniffing
        var UA = navigator.userAgent;
        hasTouchScreen = (
            /b(BlackBerry|webOS|iPhone|IEMobile)b/i.test(UA) ||
            /b(Android|Windows Phone|iPad|iPod)b/i.test(UA)
        );
    }
}

if (hasTouchScreen)
    // Do something here. 
}

Read more about browser detection using the user agent and the recommended way for mobile device detection here (有关移动设备检测的推荐方法,请查看“移动设备检测”子标题)。