如何檢測移動設備

Question

我使用 Javascript 來檢測有人正在從移動設備訪問我的 web 網站。 在 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) Version/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) 版本/13.0.1 Safari/605.1.15

這與使用 Apple Mac 相同。

我可以檢查屏幕尺寸，但對於所有不同類型的移動設備，這並不是萬無一失的。

有什么建議如何解決嗎？

Answer 1

正如評論中提到的，特征檢測通常是go（觸摸，hover...）的方式。 當我確實需要在 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：只要滿足兩個條件之一（即，只要至少一個維度小於 768 像素），mQ2 就為真。

Answer 2

我發現這個 function 效果很好

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