如何检测移动设备

Question

我使用Javascript来检测有人从移动设备访问我的网站。在Apple将iPad上的操作系统从IOS 13.1升级到iPadOS 13.1之前，这一直工作正常。

我使用代码

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
{ 
//      alert('This is a mobile device');
}

这在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( 版本/12.1.2 Mobile/15E148 Safari/604.1

现在，在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

这与使用苹果Mac相同。

我可以检查屏幕尺寸，但对于所有不同类型的移动设备，这不是万无一失的。

有什么建议如何解决吗？

Answer 1

正如评论中提到的，功能检测通常是要走的路(触摸，悬停...当我确实需要在 Javascript 中区分手机和更大的屏幕(台式机、平板电脑(时，我会结合使用触摸屏检测和屏幕大小媒体查询来使其尽可能可靠。触摸屏部分取自 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;逗号分隔的两个查询充当逻辑 OR：只要满足两个条件之一(即，只要至少一个维度低于 768px(，mQ2 就为 true。

Answer 2

我发现这个函数运行得很好

function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}; 

来源： https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript