JavaScript how to check User Agent for Mobile/Tablet

by

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.

More Related Contents:

  1. Removing address bar from browser (to view on Android)
  2. Are there any standards for mobile device web browsers in terms of thread sleeping? [closed]
  3. screen styling when virtual keyboard is active
  4. How to detect if web app running standalone on Chrome mobile
  5. Detecting the system DPI/PPI from JS/CSS?
  6. onClick not working on mobile (touch)
  7. Phonegap – Save image from url into device photo gallery
  8. Disabling the context menu on long taps on Android
  9. JavaScript alert not working in Android WebView
  10. Blocking device rotation on mobile web pages
  11. keyCode on android is always 229
  12. Android – Parse JS generated urls with JSOUP
  13. How to handle floats and decimal separators with html5 input type number
  14. Detect between a mobile browser or a PhoneGap application
  15. How to check browser for touchstart support using JS/jQuery?
  16. Is there a limit on length of the key (string) in JS object?
  17. Invoke native date picker from web-app on iOS/Android
  18. Is it possible to control the camera light on a phone via a website?
  19. Is it possible to get data from HTML forms into android while using webView?
  20. Using environment variables / parameterizing config.xml
  21. How to play a video in a webview with android?
  22. How to clear react-native cache?
  23. HTML5 Audio can’t play through Javascript unless triggered manually once
  24. Cordova – refuse to execute inline event handler because it violates the following content Security policy
  25. Can I prevent phone from sleep on a webpage
  26. Mobile viewport height after orientation change
  27. React-Native assembleRelease fails for task ‘:app:bundleReleaseJsAndAssets’
  28. What are best practices for detecting pixel ratio/density?
  29. Display Good-looking Math Formula in Android
  30. Android Phonegap – How to Open Native Google Maps Application

Leave a Comment