JavaScript detecta el navegador móvil

1. Detectar el navegador móvil detectando el dispositivo utilizado
2. Detectar navegador móvil por pantalla táctil

JavaScript se usa ampliamente para desarrollar aplicaciones basadas en web. La mayoría de estas aplicaciones también son compatibles con navegadores móviles.

Este tutorial demostrará los diversos métodos disponibles para detectar un navegador móvil usando JavaScript.

Detectar el navegador móvil detectando el dispositivo utilizado

El enfoque más simple y directo para identificar un navegador móvil usando JavaScript es ejecutar una lista de varios dispositivos disponibles en el mercado hoy en día y verificar si el useragent complementa alguno de los dispositivos en la lista disponible para nosotros.

El siguiente es el fragmento de código de la función con la que trabajaremos:

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 limitar aún más nuestra búsqueda de dispositivos móviles asumiendo que el dispositivo de destino es móvil si la resolución es menor o igual a 800x600, aunque la mayoría de los móviles disponibles en la actualidad ofrecen una resolución mucho mayor.

Por lo tanto, se recomienda utilizar ambos métodos, detectar el dispositivo utilizado y detectar la resolución del dispositivo para obtener la mayor eficiencia para evitar falsos positivos.

El siguiente es el código para detectar la resolución del dispositivo que está operando el usuario.

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

Detectar navegador móvil por pantalla táctil

Otro enfoque para verificar si el dispositivo de destino operado por el usuario es un dispositivo móvil o no es verificando si el usuario está usando un dispositivo operado por contacto. Dado que todos los teléfonos móviles disponibles en el mercado hoy en día son táctiles, este método es confiable y eficiente.

Sin embargo, existe una limitación de que este método también incluirá tabletas, ya que también son operadas por contacto.

Podemos utilizar el siguiente código para detectar un navegador móvil viendo si el dispositivo funciona mediante una pantalla táctil.

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

Esta función se puede ampliar aún más para incluir no solo teléfonos móviles y tabletas, sino también computadoras de escritorio y portátiles que admitan pantallas táctiles.

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