Como detectar navegadores móveis com JavaScript

A detecção móvel sempre foi um aspecto crucial do desenvolvimento de aplicativos. É relevante tanto para aplicativos, mas também para software e sites. Existem inúmeras razões para verificar se há agentes de navegador móvel. Mais importante ainda, a capacidade de renderizar uma experiência de usuário única.

A biblioteca UAParser.js sozinha recebe milhões de downloads de pacotes semanais. E, na maioria dos casos, basta construir algo do zero. Mas e as formas alternativas de detectar navegadores móveis com JavaScript?

Às vezes, você pode querer apenas uma solução simples que faça o trabalho sem nenhuma biblioteca. E neste artigo, vou apresentar para você um punhado de técnicas de JavaScript para detectar usuários móveis. Deixe-me saber se eu perdi algum!

navigator.userAgent

O santo graal da detecção do navegador é a propriedade navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Esta é, naturalmente, uma maneira muito primitiva de fazê-lo. Ele pode ser facilmente manipulado, pois a propriedade User-Agent pode ser falsificada. Mas, como ele faz o trabalho, você ainda pode usá-lo em uma variedade de projetos. Por exemplo, páginas de destino ou fazer um redirecionamento personalizado para uma versão móvel.

Como usar navigator.userAgent para detectar o tipo de navegador e exibir conteúdo com base no navegador específico?

Tudo bem, então, pode haver um caso de uso exclusivo em que você deseja detectar um navegador específico, como Chrome e Firefox (ou, neste caso, Android e iPhone) e, em seguida, usar esses dados para exibir conteúdo específico. Essa abordagem é frequentemente usada para fornecer/alterar links de download para navegadores específicos.

Nesse caso, você pode usar a seguinte função.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Você pode comentar as várias instruções else if para os navegadores que não deseja verificar e, da mesma forma – você pode adicionar navegadores adicionais que deseja verificar.

TouchEvent

Um método para detectar usuários móveis é verificar se o dispositivo possui uma tela sensível ao toque.

Usando a propriedade GlobalEventHandlers.ontouchstart, você pode fazer uma verificação simples para ver como o usuário interagiu com seu aplicativo. Se a interação vier de uma tela sensível ao toque, você poderá retornar uma versão móvel do aplicativo ou da página.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Dispositivos de tela sensível ao toque como o Surface não possuem essa propriedade. Assim, os usuários provenientes de dispositivos de toque baseados em desktop ainda verão a versão para desktop de suas páginas.

Window.matchMedia()

O Window.matchMedia() é uma das melhores propriedades para detectar usuários móveis com JavaScript. E é assim porque permite interagir diretamente com CSS.

Em muitos casos, as consultas de mídia são superiores porque possuem ferramentas de detecção móvel integradas. Por exemplo, você pode fazer uma chamada para verificar se “pointer:coarse” é verdadeiro.

Essa declaração específica valida se o ponteiro do dispositivo é bom ou grosso .

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

Como alternativa, o dispositivo pode ter um ponteiro fino e um ponteiro grosso. Para este caso de uso, podemos verificar se algum ponteiro é grosseiro.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Tenha em mente que isso apenas valida a consulta como verdadeira ou falsa. Uma maneira mais refinada de verificar dispositivos móveis é usar consultas de mídia diretamente.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Essa consulta verificará diretamente a largura máxima do dispositivo e confirmará se ele corresponde aos critérios. Novamente, isso é muito trabalhoso para obter todos os dispositivos corretamente. Dessa forma, é mais fácil usar uma biblioteca pré-criada com todos os tipos de dispositivos já definidos.

Útil em certos contextos

Ao longo dos anos, surgiram muitas propriedades JavaScript para detectar tipos de dispositivos. Um grande número deles ficou obsoleto, mas a maioria dos outros foi integrada às bibliotecas. O que também é a melhor maneira de fazer a detecção móvel adequada.

Por último, mas não menos importante, a maioria das estruturas modernas já inclui a detecção móvel como parte da própria estrutura. Vale a pena investigar se você não quiser fazer todo o trabalho braçal.

Bibliotecas para detectar dispositivos móveis

Para esta seção, vou listar as bibliotecas JavaScript mais populares para detectar dispositivos móveis. Novamente, enfatizo que eles são específicos do JavaScript. Consulte os documentos para a implementação adequada em seu aplicativo.

UAParser.js

No que diz respeito às bibliotecas completas, o UAParser é o melhor que existe. Com mais de 10 milhões de downloads semanais apenas no npm – UAParser é a solução de fato para detectar dispositivos móveis. Como o nome indica – a biblioteca funciona analisando as strings do User-Agent.

No entanto, o que o torna tão popular é o fato de que você pode analisar centenas de variações de dispositivos. E tudo isso está muito bem documentado. Você pode ir de fornecedores de dispositivos práticos a padrões de detecção mais complexos, como arquitetura de CPU.

mobile-detect.js

Esta é uma porta bastante simples da biblioteca Mobile Detect para PHP, fornecida à comunidade por Heinrich Goebl. A própria biblioteca usa User-Agent para detecção, então, como discutimos anteriormente, não é a melhor opção.

Ainda assim, deve fazer o trabalho quando se trata de modelos HTML práticos ou projetos de portfólio.

isMobile

Aqui temos outra visão da propriedade User-Agent Navigator de Kai Mallea. Embora ainda seja uma solução simplista, gosto que o isMobile forneça uma variedade de especificações. Por exemplo, você pode testar qualquer dispositivo móvel ou específico, como telefone ou tablet .

reagir-dispositivo-detectar

Você é um desenvolvedor React.js?

Então esta biblioteca de Michael Laktionov é para você. Funciona como seria de esperar – primeiro a biblioteca detecta o tipo de dispositivo e, em seguida, renderiza a visualização com base nesse tipo. Funciona perfeitamente com integração de componentes e pode ser personalizado ainda mais por meio de chamadas de API.

Um fato interessante é o número de seletores que esta biblioteca inclui. Abrange dispositivos como smart TVs, wearables, uma variedade de dispositivos iPhone e muito mais. Isso oferece uma ampla seleção de opções de design ao criar um aplicativo para um dispositivo específico.