Como detectar se o usuário está usando um dispositivo móvel com JavaScript?

Em aplicações web, é comum que certas funcionalidades ou estilos sejam adaptados conforme o tipo de dispositivo. Identificar se o usuário está em um dispositivo móvel pode ser feito de diversas formas no JavaScript, cada uma com vantagens e limitações. Os métodos mais usados envolvem a análise do User-Agent, a verificação do suporte a eventos de toque, a largura da tela, a densidade de pixels e o uso de media queries.

Verificação da cadeia User-Agent

function isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

if (isMobileDevice()) {
  console.log("Dispositivo móvel detectado");
} else {
  console.log("Provavelmente não é um dispositivo móvel");
}

Esse método testa a propriedade navigator.userAgent para detectar nomes de dispositivos e sistemas móveis comuns. Apesar de simples, apresenta limitações importantes. A cadeia do User-Agent pode ser modificada, e alguns tablets ou navegadores em modo de emulação podem se passar por dispositivos móveis ou desktop incorretamente.

Suporte a eventos de toque

function isTouchScreen() {
  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
}

Esse código verifica se a interface suporta interações por toque. A presença da propriedade ontouchstart no objeto window, ou um valor maior que zero em navigator.maxTouchPoints, indica que o dispositivo provavelmente conta com tela sensível ao toque. Ainda assim, alguns notebooks com touchpad ou emulação também podem atender a essas condições.

Combinação com largura da tela

function isMobile() {
  const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
  const isSmallScreen = window.innerWidth < 768;
  return hasTouch && isSmallScreen;
}

Ao considerar simultaneamente a largura do viewport e o suporte a toque, esse método tende a ser mais preciso. A maioria dos smartphones possui largura inferior a 768 pixels, embora esse limiar não seja uma regra absoluta. Notebooks com tela sensível ao toque podem ainda retornar um resultado positivo, mesmo sem serem dispositivos móveis.

Media queries com window.matchMedia

Permite verificar media queries diretamente no JavaScript, usando a mesma lógica das regras CSS.

function isMobileView() {
  return window.matchMedia("(max-width: 767px)").matches;
}

Esse método verifica se a janela atual atende à condição de largura definida. Como considera apenas o tamanho do viewport, uma janela estreita em um computador também pode ser interpretada como um dispositivo móvel.

Densidade de pixels com window.devicePixelRatio

function isHighDensityDisplay() {
  return window.devicePixelRatio >= 2;
}

A propriedade window.devicePixelRatio representa a razão entre os pixels físicos e os pixels CSS. Em geral:

• monitores convencionais têm valores entre 1 e 1.25;
• smartphones, tablets e telas Retina costumam exibir valores entre 2 e 3 ou mais.

Esse dado pode ajudar a identificar telas de alta definição e otimizar imagens ou recursos gráficos para dispositivos modernos.

Distinções por sistema operacional:

const dpr = window.devicePixelRatio;

if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
  console.log(`Dispositivo Apple com DPR = ${dpr}`);
} else if (/Android/i.test(navigator.userAgent)) {
  console.log(`Dispositivo Android com DPR = ${dpr}`);
} else {
  console.log("Dispositivo não identificado (provavelmente desktop)");
}

Imagens podem ser adaptadas conforme a densidade detectada:

const dpr = window.devicePixelRatio;
const img = document.querySelector("img");

if (dpr >= 2) {
  img.src = "image@2x.png";
} else {
  img.src = "image.png";
}

Abordagem combinada

Uma detecção mais robusta geralmente envolve a combinação de critérios:

function isMobile() {
  const ua = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  const touch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
  const narrow = window.innerWidth < 768;

  return ua || (touch && narrow);
}

Esse exemplo considera como móvel qualquer dispositivo que apresente cadeia User-Agent correspondente ou que tenha tela sensível ao toque e largura reduzida. O uso do operador || amplia o alcance da detecção, enquanto uma versão mais restrita poderia empregar && para exigir múltiplas condições simultâneas.

Outra opção considera também a densidade de pixels:

function isMobileDevice() {
  const ua = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
  const highDPI = window.devicePixelRatio >= 2;
  const narrow = window.innerWidth < 768;

  return ua || (highDPI && narrow);
}

Ou ainda:

function isRetinaMobile() {
  const dpr = window.devicePixelRatio;
  const isApple = /iPhone|iPad|iPod/i.test(navigator.userAgent);
  const isAndroid = /Android/i.test(navigator.userAgent);

  return dpr >= 2 && (isApple || isAndroid);
}

Considerações Finais

Nenhuma das abordagens isoladas fornece uma resposta infalível. A análise da cadeia User-Agent pode ser enganosa, o suporte a toque não é exclusivo de smartphones, a largura da tela pode variar por emulação ou redimensionamento manual, e a densidade de pixels não distingue entre tipos de dispositivos. Portanto, o ideal é combinar dois ou mais critérios, de acordo com o grau de precisão necessário para cada contexto de uso.