JavaScript how to check User Agent for Mobile/Tablet

Question

I'm currently developing some JS work for a clients website which has different functionality across desktop and tablet platforms. Consider:

if(! navigator.userAgent.match(/Android/i) &&
            ! navigator.userAgent.match(/webOS/i) &&
            ! navigator.userAgent.match(/iPhone/i) &&
            ! navigator.userAgent.match(/iPod/i) &&
            ! navigator.userAgent.match(/iPad/i) &&
            ! navigator.userAgent.match(/Blackberry/i) )
    {
        // do desktop stuff

    } else if ( navigator.userAgent.match(/iPad/i) ) 
    {
       // do tablet stuff

    }

Currently, I'm only checking for iPad as checking for "android" seems somewhat problematic, and is a very broad term. Is there a known method for distinguishing between Android tablet & mobile using JS?

Many thanks, Myles

So according to the comments on this question: http://stackoverflow.com/questions/5341637/how-do-detect-android-tablets-in-general-useragent There are many tablets that contain the 'mobile' in the UA. Any way to get around this? — Myles, Feb 13 '14 at 14:43

oriadam · Answer 1 · 2017-03-21T07:42:02.843

First - improving the condition

if (navigator.userAgent.match(/iPad/i))
{
    // do tablet stuff
} else if(navigator.userAgent.match(/Android|webOS|iPhone|iPod|Blackberry/i) )
{
    // do mobile stuff
} else {
    // do desktop stuff
}

Second, adding the missing keywords:

if (navigator.userAgent.match(/Tablet|iPad/i))
{
    // do tablet stuff
} else if(navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi/i) )
{
    // do mobile stuff
} else {
    // do desktop stuff
}

And third, this is the actual detection script that I use:

https://jsfiddle.net/oriadam/ncb4n882/

var
    ua = navigator.userAgent,
    browser = /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrome\W\d/.test(ua) ? 'gc' : /Chromium\W\d/.test(ua) ? 'oc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '',
    os = /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "",
    mobile = /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test(ua) ? 'b' : /Mobile Safari/.test(ua) ? 's' : /webOS|Mobile|Tablet|Opera Mini|\bCrMo\/|Opera Mobi/i.test(ua) ? 1 : 0,
    tablet = /Tablet|iPad/i.test(ua),
    touch = 'ontouchstart' in document.documentElement;

EDIT:

Note that tablets and iPads are considered both mobile and tablet. Note that there are laptops with both touch, mouse and keyboard. In other words a good programmer does not depend on touch - instead it support all three input methods in all cases.

Is this still accurate? I had to remove `Mobile` from the list to not match an iPad. Thanks — Mario Parra, Mar 20 '17 at 06:11
@MarioParra Tablets and iPads are both `mobile` and `tablet` — oriadam, Mar 21 '17 at 07:38
... so what you're saying is... "You need a discount `double check`" ? — Eric Hodonsky, Mar 29 '17 at 22:02
After splitting into tablet (at first that's probably only iPad), mobile and desktop, I would (before doing stuff) then do a "correctional" attempt `if (type=='phone)` and possibly some from phone to tablet, based on max(height,width) [according to this great table](https://mydevice.io/devices/). (Yes, still a smoke test/decision... but) — Frank N, Oct 23 '17 at 14:23

score 3 · Answer 2 · answered Jun 12 '19 at 06:48

you could use follow those steps

  var isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function () {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if (isMobile.any()) {
    window.location = "#";
}

JavaScript how to check User Agent for Mobile/Tablet

2 Answers2

Linked