JavaScript detecta navegador móvel

  1. Detectar navegador móvel detectando dispositivo usado
  2. Detectar navegador móvel pela tela de toque

JavaScript é amplamente usado para desenvolver aplicativos baseados na web. A maioria desses aplicativos também é compatível com navegadores móveis.

Este tutorial demonstrará os vários métodos disponíveis para detectar um navegador móvel usando JavaScript.

Detectar navegador móvel detectando dispositivo usado

A abordagem mais simples e direta para identificar um navegador móvel usando JavaScript é percorrer uma lista de vários dispositivos disponíveis no mercado hoje e verificar se o useragent complementa qualquer um dos dispositivos da lista disponível para nós.

A seguir está o trecho de código da função com a qual trabalharemos -

function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

Podemos restringir ainda mais nossa busca por dispositivos móveis assumindo que o dispositivo de destino é móvel se a resolução for menor ou igual a 800x600, embora a maioria dos celulares disponíveis hoje ofereça uma resolução muito maior.

Portanto, é recomendável usar os dois métodos, detectar o dispositivo usado e detectar a resolução do dispositivo para a maior eficiência para evitar falsos positivos.

A seguir está o código para detectar a resolução do dispositivo que o usuário está operando.

function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
}

Detectar navegador móvel pela tela de toque

Outra abordagem para verificar se o dispositivo de destino operado pelo usuário é um dispositivo móvel ou não é verificar se o usuário está usando um dispositivo operado por toque. Como todos os telefones celulares disponíveis no mercado hoje são operados por toque, esse método é confiável e eficiente.

No entanto, há uma limitação de que esse método também incluirá tablets, uma vez que eles também são operados por toque.

Podemos usar o código a seguir para detectar um navegador móvel, verificando se o dispositivo opera usando uma tela de toque.

var touchDevice = ('ontouchstart' in document.documentElement);

Essa função pode ser expandida para incluir não apenas telefones celulares e tablets, mas também desktops e laptops com suporte para telas sensíveis ao toque.

var touchDevice = ('ontouchstart' in document.documentElement);