Como detectar dispositivos moveis, iOS / Android, com Javascript

Função em Javascript puro para detectar dispositivos móveis “mobile”, retornando também o sistema operacional que está instalado no celular, “Android” ou “iOS”.

Como detectar um dispositivo móvel utilizando apenas Javascript, identificando o “browser mobile” que está sendo utilizando pelo visitante.

Detectando dispositivos móveis

Para identificar se o acesso está sendo proveniente de um celular “smartphone”, utilizamos o userAgent da requisição.

Como existe uma variação na forma de se obter o userAgent, temos que recupera-lo com a seguinte instrução:

var userAgent = navigator.userAgent || navigator.vendor || window.opera;

No segundo passo iremos identificar qual é sistema operacional que está sendo utilizando, para isso utilizamos:

// exemplo

userAgent.match( /iPad/i )

Função completa

Copie e cole a função em seu projeto.

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';
  }
}

Ela poderá retornar os seguintes valores:

• Android
• iOS
• unknown (sistema desconhecido)

Exemplo de utilização

Para complementar o Post, iremos fazer uma exemplo aonde redirecionamos o visitante de acordo com o sistema operacional que ele está utilizando (Android ou IOS)

var tipo = getMobileOperatingSystem();
if( tipo == "Android" ){
 	window.location ="http://exemplo1.com";
}else if( tipo == "iOS" ){
 	window.location = "http://exemplo2.com";
}

Mais funções

A função acima não funcionou corretamente? Utilize uma das funções a seguir.

function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}

Outra forma, mais completa:

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) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if( isMobile.any() ) alert('Mobile');

Forma enxuta de detectar dispositivos móveis

Navegadores em Desktop não suportam “window.orientation”, neste caso você consegue com apenas uma condição realizar o teste.

if (typeof window.orientation !== 'undefined') { alert("mobile"); }

Contudo, este método é menos preciso que os anteriores.