[英]How to detect a mobile device
I use Javascript to detect that someone is accessing my web site from a mobile device.我使用 Javascript 来检测有人正在从移动设备访问我的 web 网站。 This has worked fine until Apple upgraded their OS on their iPad from IOS 13.1 to iPadOS 13.1.
在 Apple 将 iPad 上的操作系统从 IOS 13.1 升级到 iPadOS 13.1 之前,这一直运行良好。
I use the code我使用代码
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
// alert('This is a mobile device');
}
This worked as navigator.userAgent on IOS 13.1 was这在 IOS 13.1 上用作 navigator.userAgent 是
Mozilla/5.0 (iPad; CPU OS 12_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1 Mozilla/5.0 (iPad; CPU OS 12_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1
Now, with iPadOS 13.1 it is现在,有了 iPadOS 13.1
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) 版本/13.0.1 Safari/605.1.15
which is the same as using an Apple Mac.这与使用 Apple Mac 相同。
I could check the screen size but with all the different types of mobile devices this is not fool-proof.我可以检查屏幕尺寸,但对于所有不同类型的移动设备,这并不是万无一失的。
Any suggestions how to resolve please?有什么建议如何解决吗?
As mentioned in the comments, feature detection is often the way to go (touch, hover...).正如评论中提到的,特征检测通常是go(触摸,hover...)的方式。 When I do need to differentiate between phones and larger screens (desktop, tablet) in Javascript, I use a combination of touchscreen detection and screen size media query to make it as reliable as possible.
当我确实需要在 Javascript 中区分手机和大屏幕(台式机、平板电脑)时,我会结合使用触摸屏检测和屏幕尺寸媒体查询来使其尽可能可靠。 The touchscreen part is taken from mdn , which is an extensive and excellent read.
触摸屏部分取自mdn ,这是一本广泛而优秀的读物。
export const isMobile = () => {
let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
let mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
hasTouchScreen = !!mQ.matches;
} else if ('orientation' in window) {
hasTouchScreen = true;
} else {
let UA = navigator.userAgent;
hasTouchScreen = (
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
);
}
}
let mQ2 = window.matchMedia && matchMedia("(max-width: 767px), (max-height: 767px)");
return ((hasTouchScreen === true) && (mQ2.matches === true));
}
window.matchMedia is thoroughly supported ; window.matchMedia 得到彻底支持; the two queries separated by the comma act as a logical OR: mQ2 is true whenever one of the two conditions is met (that is, whenever at least one dimension is under 768px).
用逗号分隔的两个查询充当逻辑 OR:只要满足两个条件之一(即,只要至少一个维度小于 768 像素),mQ2 就为真。
I found this function that works pretty well我发现这个 function 效果很好
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
source: https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript来源: https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.