JavaScript rileva il browser mobile

1. Rileva il browser mobile rilevando il dispositivo utilizzato
2. Rileva browser mobile tramite touch screen

JavaScript è ampiamente utilizzato per lo sviluppo di applicazioni basate sul web. La maggior parte di queste applicazioni è compatibile anche con i browser mobili.

Questo tutorial dimostrerà i vari metodi disponibili per rilevare un browser mobile utilizzando JavaScript.

Rileva il browser mobile rilevando il dispositivo utilizzato

L’approccio più semplice e diretto per identificare un browser mobile utilizzando JavaScript consiste nell’esaminare un elenco di vari dispositivi disponibili oggi sul mercato e verificare se l’useragent integra uno dei dispositivi nella lista a nostra disposizione.

Quello che segue è il frammento di codice della funzione con cui lavoreremo -

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

Possiamo restringere ulteriormente la nostra ricerca di dispositivi mobili assumendo che il dispositivo di destinazione sia mobile se la risoluzione è inferiore o uguale a 800x600, anche se la maggior parte dei cellulari oggi disponibili offre una risoluzione molto maggiore.

Pertanto, si consiglia di utilizzare entrambi i metodi, rilevare il dispositivo utilizzato e rilevare la risoluzione del dispositivo per la massima efficienza per evitare falsi positivi.

Di seguito è riportato il codice per rilevare la risoluzione del dispositivo che l’utente sta utilizzando.

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

Rileva browser mobile tramite touch screen

Un altro approccio per verificare se il dispositivo di destinazione gestito dall’utente è un dispositivo mobile o meno consiste nel verificare se l’utente sta utilizzando un dispositivo touch. Poiché tutti i telefoni cellulari disponibili oggi sul mercato sono touch, questo metodo è affidabile ed efficiente.

Tuttavia, c’è una limitazione che questo metodo includerà anche i tablet poiché sono anch’essi touch.

Possiamo utilizzare il seguente codice per rilevare un browser mobile verificando se il dispositivo funziona utilizzando un touch screen.

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

Questa funzione può essere ulteriormente ampliata per includere non solo telefoni cellulari e tablet, ma anche desktop e laptop che supportano i touch screen.

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