How to detect a mobile device

Question

I use Javascript to detect that someone is accessing my web site from a mobile device. This has worked fine until Apple upgraded their OS on their iPad from IOS 13.1 to 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

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

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

which is the same as using an 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?

Answer 1

As mentioned in the comments, feature detection is often the way to go (touch, 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. The touchscreen part is taken from mdn , which is an extensive and excellent read.

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 ; 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).

Answer 2

I found this function that works pretty well

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