9

Tenho uma aplicação web com AngularJS, onde preciso saber se o usuário está num dispositivo móvel para melhorar sua experiência, colocando botões para fazer chamadas, mandar mensagem, etc.

Tenho uma diretiva que vai exibir um elemento a partir deste teste:

var isMobile = DetectDeviceService.isMobile();

A grande questão é o que devo testar para detectar qualquer tipo de dispositivo móvel? Como deve ser a implementação do isMobile()?

4 Respostas 4

7

NÃO USE USERAGENT.

Sério. Não. Apenas não. Passe longe.

Se você for por esse caminho, você só vai garantir que no dia que lançarem um browser novo, ou quando um dos browsers mobiles atuais mudar seu valor de user agent, o teu site vai ficar todo quebrado para muita gente. Já vi isso acontecer antes.

Existem duas formas de fato elegantes de saber se você deve servir uma versão mobile do seu site ou não.

  • Forma bruta

Verifique o tamanho da tela na mão. Tipo assim:

if (screen.width < 640 || screen.height < 480) {
    // sirva a versão pra celular
} else if (screen.width < 1024 || screen.height < 768) {
    // talvez seja uma boa usar versão pra tablet
} else {
    // sirva a versão normal
}

Essa forma serve para casos pequenos, menores, provas de conceito talvez. Note que essa forma poderá ficar datada em alguns anos: caso os celulares mantenham a tendência de ter resolução de tela cada vez maior, essa estratégia eventualmente deixará de funcionar.

  • Forma profissional

Utilize uma biblioteca como o Modernizr, que tem uma funcionalidade chamada "detecção de features". Trata-se de uma forma muito mais elaborada de saber o que o navegador do usuário pode entender e renderizar. Ele vai além de determinar apenas o fator de tamanho do dispositivo do usuário. Com base no que você obtiver ao usar a API do Modernizr você define se e como vai servir algum conteúdo.

Dá uma olhada na documentação.

Você também pode usar o Bootstrap para facilitar o trabalho de estilização. É possível escrever um único HTML que se adequa automaticamente e fica bonito em celular, tablet, desktop e telão.

Edit: você diz que gostaria de melhorar a experiência do usuário colocando ou removendo botões, etc.

Talvez o que lhe interesse mesmo é saber se o dispositivo possui tela sensível a toque, certo? Assim você pode servir uma interface feita para ser tocada se houver suporte, e uma interface voltada a cliques caso contrário.

Muitos laptops hoje em dia têm tela sensível a toque. Eu tenho um com uma tela bem grande e rodo Windows e Chrome nele. Todo site que utiliza a simples leitura do user agent já está por padrão quebrado para mim.

A maneira correta de se verificar isso com o Modernizr é:

var euDevoServirConteudoTouch = Modernizr.touch;

Isso é muito mais preciso do que ler o user agent, pois assim você sabe se o usuário irá utilizar um dispositivo sensível a toque independente do dispositivo ser móvel.

3

No site Detect Mobile Browsers você pode fazer o download do código correspondente a diversas linguagens mais famosas e pertinentes no mercado.

Código javascript retirado do site.

(function(a, b) {
    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) window.location = b
})(navigator.userAgent || navigator.vendor || window.opera, 'http://detectmobilebrowser.com/mobile');

Nesta pergunta do So-En tem uma serie de maneiras, inclusive com regex nesta outra pergunta.

Segue mais um exemplo:

window.onload = function() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        console.log('Dispositivo Movel');
    }
}

2

Todas as respostas anteriores são antigas, de 2017. Hoje, em 2021, existem outras tecnicas para identificar se o navegador está sendo utilizado por um dispositivo móvel.


Se o navegador suportar o UA-Client-Hint, você pode utilizar simplesmente:

if (navigator.userAgentData != undefined && navigator.userAgentData.mobile) {
  alert("é mobile");
}

Para testar o código acima, clique em "Inspecionar Elemento" e habilite o modo de celular, ou entre nessa página no seu celular.


Por enquanto, itso só está disponível para Google Chrome 89 (e equivalentes versões do Opera e Microsoft Edge). Outros navegadores podem implementar isso no futuro, você pode ver mais informações em https://www.chromestatus.com/feature/5995832180473856.

1

Pra verificar se um usuário está acessando de um dispositivo mobile, usa-se a condição abaixo:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // Seu código
}

Aí é só encaixar essa condição no teu código que, no caso, é mais contigo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .