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);