javascript - 如何检测移动设备

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，如 Mac OS X)AppleWebKit/605.1.15(KHTML，如 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，如 Gecko)版本/13.0.1 Safari/605.1.15

这与使用 Apple 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 是 thoroughly supported ;用逗号分隔的两个查询充当逻辑“或”:只要满足两个条件之一(即，只要至少一个维度低于 768 像素)，mQ2 就为 true。