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.
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 )
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:
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";
}
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'); 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.
Módulo gratuito Roger_CnpjAlfanumerico que aplica máscara e validação do novo CNPJ alfanumérico no checkout e formulários do Magento 2 e…
A partir de 06/07/2026 a Receita passa a emitir CNPJ alfanumérico. Conheça o plugin grátis que aplica máscara e validação…
Para remover um módulo do Magento 2, siga os passos abaixo: 1. Desabilitar o módulo Primeiro, desabilite o módulo usando…
Para cancelar 100% do pedido e criar um crédito para todos os itens através da API REST do Magento 2,…
No Magento 2, a quantidade "reservada" na "Salable Quantity" é gerenciada principalmente pelos módulos MSI (Multi-Source Inventory). A "Salable Quantity"…
Como corrigir o erro ao acessar o Admin do Magento 2. Mesmo após fazer o login, permanece na tela de…
Ver comentários
Roger, parabéns pela a iniciativa do site!
Sugiro que revise o conteúdo destas implementações no post, tendo em vista que acabaram ficando obsoletas; Desde já agradeço a atenção. Saiba mais em: https://pt.stackoverflow.com/questions/194988/como-detectar-um-dispositivo-m%C3%B3vel-em-javascript
Sucesso!