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

carvr3hs  于 2023-01-11  发布在  Java
关注(0)|答案(2)|浏览(103)

我只是想检查一下使用我网站的decive是在移动的上还是其他设备上。这是一个快速的问题,我希望能得到快速的回答。

ddhy6vgd

ddhy6vgd1#

如果您试图查看用户的设备是否是移动的设备,MDN文档建议您在navigator(或浏览器)对象中查找属性maxTouchPoints,并查看值是否为> 0
在过去,这通常是通过 * 用户代理嗅探 *(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.
}

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

使用先前方法和备用方法的组合检测移动的设备的更好方法(最稳健的方法,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(有关建议的移动终端检测方法,请查看“移动设备检测”副标题)。

6psbrbz9

6psbrbz92#

在javascript中使用这个条件:

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){
//do your stuff here
}

相关问题