How to detect whether browser is iOS, android or desktop using jquery?

Question

The idea is to make a button that says "get app now" with a link that changes based on whether its an android phone iPhone or none. I looked through stackexchange for answers but nothing is clear for someone who has no js experience

score 1 · Answer 1 · edited May 23 '17 at 12:07

Try this,

Unknown is desktop or any other phone

function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
  {
    return 'iOS';

  }
  else if( userAgent.match( /Android/i ) )
  {

    return 'Android';
  }
  else
  {
    return 'unknown'; 
  }
}

Source: Detecting iOS / Android Operating system

score 1 · Answer 2 · answered Dec 15 '17 at 11:29

//TO check device is mobile or desktop.

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

//Detect iPad

var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isiPad)
{
  ...
}

//Detect iPhone

var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone)
{
  ...
}

//Detect iPod

var isiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isiPod)
{
  ...
}

//Detect iDevice

var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());

if (isiDevice)
{
  ...
}

//Detect Andriod

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isAndroid)
{
  ...
}

//Detect Blackberry

var isBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());

if (isBlackBerry)
{
  ...
}

//Detect WebOs

var isWebOS = /webos/i.test(navigator.userAgent.toLowerCase());

if (isWebOS)
{
  ...
}

//Detect Windows Phone

var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());
if (isWindowsPhone)
{
  ...
}

The mentioned code is what I found at the following link. https://www.sitepoint.com/detect-mobile-devices-jquery/

score 1 · Answer 3 · answered Jun 22 '18 at 13:33

The answer from Tom Landau in js <= ES5 (using "old" language grammar):

/**
 * @summary
 * utils.isMobile
 * --------------
 * @desc
 * Creates a global object with member functions that test if the client's browser 
 * belongs to a specific family of devices.
 * @function utils.isMobile
 * @return {Boolean}
 * @see {@link https://stackoverflow.com/questions/32570067/how-to-detect-whether-browser-is-ios-android-or-desktop-using-jquery}, 
 * {@link https://bitsrc.io/tomlandau/simple-js/global/is-mobile/code#src/global/isMobile.js}
 */
utils = window.utils || {};
utils.isMobile = {
   getUserAgent: function() {
      return navigator.userAgent;
   },
   Android: function() {
      return /Android/i.test(this.getUserAgent()) && !this.Windows();
   },
   BlackBerry: function() {
      return /BlackBerry|BB10|PlayBook/i.test(this.getUserAgent());;
   },
   iPhone: function() {
      return /iPhone/i.test(this.getUserAgent()) && !this.iPad() && !this.Windows();
   },
   iPod: function() {
      return /iPod/i.test(this.getUserAgent());
   },
   iPad: function() {
      return /iPad/i.test(this.getUserAgent());
   },
   iOS: function() {
      return (this.iPad() || this.iPod() || this.iPhone());
   },
   Opera: function() {
      return /Opera Mini/i.test(this.getUserAgent());
   },
   Windows: function() {
      return /Windows Phone|IEMobile|WPDesktop/i.test(this.getUserAgent());
   },
   KindleFire: function() {
      return /Kindle Fire|Silk|KFAPWA|KFSOWI|KFJWA|KFJWI|KFAPWI|KFAPWI|KFOT|KFTT|KFTHWI|KFTHWA|KFASWI|KFTBWI|KFMEWI|KFFOWI|KFSAWA|KFSAWI|KFARWI/i.test(this.getUserAgent());
   },
   any: function() {
      return (this.Android() || this.BlackBerry() || this.iOS() || this.Opera() || this.Windows());
   }
};

Tested as usual: if(utils.isMobile.any())... or if(utils.isMobile.Android())....

How to detect whether browser is iOS, android or desktop using jquery?

3 Answers3