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.
Um comentário sobre “Como detectar dispositivos moveis, iOS / Android, com Javascript”