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?

You should not detect "mobile device", you should target specific features if you need them. — cloned

Danielozzo Danielozzo · Accepted Answer · 2019-10-25T21:14:47

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

How to detect a mobile device

2 Answers