[英]How can I check if the device, which is using my website, is a mobile user or not
I just want to check if the decive, which is using my website, is on a mobile or any other device.我只想检查正在使用我的网站的设备是否在移动设备或任何其他设备上。 It's a quick question with a quick answer I hope.我希望这是一个快速的问题和快速的回答。
If you are trying to see if the user's device is mobile, the MDN docs advices to look for the property maxTouchPoints
in the navigator (or browser) object and see if the value is > 0
.如果您尝试查看用户的设备是否是移动设备,MDN 文档建议在导航器(或浏览器)对象中查找属性maxTouchPoints
并查看该值是否> 0
。
In the past this used to be done with User Agent Sniffing ( Read more here ), ie going through the user-agent header sent by the browser into the navigator.userAgent
property to see if it contains certain keywords.过去,这通常通过用户代理嗅探来完成( 在此处阅读更多内容),即通过浏览器发送的用户代理标头进入navigator.userAgent
属性,以查看它是否包含某些关键字。 This method however has limitations and may not always tell the right kind of device the user is on because many devices today support different browsers and features and vice versa.然而,这种方法有局限性,并且可能无法始终告诉用户使用的是正确类型的设备,因为当今许多设备支持不同的浏览器和功能,反之亦然。
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
property and if > 0
in navigator
object (MDN Docs Recommended)使用maxTouchPoints
属性检查navigator
器对象中是否> 0
(推荐 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.
}
Be aware, that not all browsers may support that specification, so the navigator object may not have the property maxTouchPoints
or some mobile devices may have large screens and some desktop devices may have small touch-screens or some people may use smart TVs and so on.请注意,并非所有浏览器都支持该规范,因此 navigator 对象可能没有属性maxTouchPoints
或者某些移动设备可能具有大屏幕而某些桌面设备可能具有小触摸屏或某些人可能使用智能电视等. So a better way to do this check would be to combine the snippet above with some fallbacks:因此,进行此检查的更好方法是将上面的代码段与一些后备组合起来:
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 (For the recommended method for mobile device detection, look under the "Mobile device detection" subheading). 在此处阅读有关使用用户代理进行浏览器检测和推荐的移动设备检测方法的更多信息(有关移动设备检测的推荐方法,请查看“移动设备检测”子标题)。
Just use this condition in javascript:只需在 javascript 中使用此条件即可:
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){
//do your stuff here
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.