Come rilevare i browser mobili con JavaScript

Il rilevamento mobile è sempre stato un aspetto cruciale dello sviluppo di app. È rilevante sia per le app, ma anche per software e siti Web. Ci sono innumerevoli ragioni per verificare la presenza di agenti browser mobili. Soprattutto, la capacità di rendere un'esperienza utente unica.

La sola libreria UAParser.js ottiene milioni di download di pacchetti settimanali. E, nella maggior parte dei casi, è sufficiente se stai costruendo qualcosa da zero. Ma che dire di modi alternativi per rilevare i browser mobili con JavaScript?

A volte potresti semplicemente desiderare una soluzione semplice che svolga il lavoro senza alcuna libreria. E in questo articolo, ti illustrerò una manciata di tecniche JavaScript per rilevare gli utenti mobili. Fammi sapere se me ne sono persa qualcuna!

navigator.userAgent

Il Santo Graal del rilevamento del browser è la proprietà navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Questo è, ovviamente, un modo molto primitivo di farlo. Può essere facilmente manipolato poiché la proprietà User-Agent può essere falsificata. Ma poiché fa il lavoro, puoi ancora usarlo in una varietà di progetti. Ad esempio, pagine di destinazione o reindirizzamento personalizzato a una versione mobile.

Come utilizzare navigator.userAgent per rilevare il tipo di browser e visualizzare il contenuto in base al browser specifico?

Bene, quindi potrebbe esserci un caso d'uso unico in cui desideri rilevare un browser specifico, come Chrome e Firefox (o in questo caso, Android e iPhone), e quindi utilizzare quei dati per visualizzare contenuti specifici. Questo approccio viene spesso utilizzato per fornire/modificare i collegamenti di download per browser specifici.

In tal caso, è possibile utilizzare la seguente funzione.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Puoi commentare le varie istruzioni else if per i browser che non desideri controllare e, allo stesso modo, puoi aggiungere altri browser che desideri controllare.

TouchEvent

Un metodo per rilevare gli utenti mobili consiste nel verificare se il dispositivo dispone di un touch screen.

Utilizzando la proprietà GlobalEventHandlers.ontouchstart puoi effettuare un semplice controllo per vedere come l'utente ha interagito con la tua app. Se l'interazione proviene da un touch screen, puoi restituire una versione mobile dell'app o della pagina.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

I dispositivi touchscreen come Surface non dispongono di questa proprietà. Pertanto, gli utenti provenienti da dispositivi touch basati su desktop vedranno comunque la versione desktop delle tue pagine.

Window.matchMedia()

Window.matchMedia() è una delle migliori proprietà per rilevare gli utenti mobili con JavaScript. Ed è così perché ti consente di interagire direttamente con i CSS.

In molti casi, le query multimediali sono superiori perché dispongono di strumenti di rilevamento mobili integrati. Ad esempio, puoi effettuare una chiamata per verificare se "pointer:coarse" è vero.

Questa specifica istruzione convalida se il puntatore del dispositivo è fine o grossolano .

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

In alternativa, il dispositivo potrebbe avere sia un puntatore fine che uno grossolano. Per questo caso d'uso, possiamo verificare se i puntatori sono grossolani.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Tieni presente che questo convalida solo la query come vera o falsa. Un modo più raffinato per verificare la presenza di dispositivi mobili consiste nell'utilizzare direttamente le query multimediali.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Questa query verificherà direttamente la larghezza massima del dispositivo e affermerà se corrisponde ai criteri. Ancora una volta, questo è un bel po' di lavoro per ottenere tutti i dispositivi correttamente. In quanto tale, è più semplice utilizzare una libreria predefinita con tutti i tipi di dispositivi già definiti.

Utile in determinati contesti

Nel corso degli anni ci sono state molte proprietà JavaScript per il rilevamento dei tipi di dispositivi. Un gran numero di essi è stato deprecato, ma la maggior parte degli altri è stata integrata nelle librerie. Che è anche il modo migliore per eseguire un corretto rilevamento mobile.

Ultimo ma non meno importante, i framework più moderni includono già il rilevamento mobile come parte del framework stesso. Vale la pena esaminarlo se non vuoi fare tutto il lavoro di gambe.

Librerie per il rilevamento di dispositivi mobili

Per questa sezione, elencherò le librerie JavaScript più popolari per il rilevamento dei dispositivi mobili. Ancora una volta, sottolineo che questi sono specifici di JavaScript. Fare riferimento ai documenti per una corretta implementazione nella tua app.

UAParser.js

Per quanto riguarda le librerie complete, UAParser è il migliore che ci sia. Con oltre 10 milioni di download settimanali solo su npm, UAParser è la soluzione de facto per il rilevamento dei dispositivi mobili. Come dice il nome, la libreria funziona analizzando le stringhe User-Agent.

Tuttavia, ciò che lo rende così popolare è il fatto che puoi analizzare centinaia di varianti del dispositivo. E tutto questo è molto ben documentato. Puoi passare da fornitori di dispositivi pratici a modelli di rilevamento più complessi come l'architettura della CPU.

mobile-detect.js

Questo è un porting abbastanza semplice della libreria Mobile Detect per PHP, fornita alla comunità da Heinrich Goebl. La libreria stessa utilizza User-Agent per il rilevamento, quindi, come discusso in precedenza, non è l'opzione migliore.

Tuttavia, dovrebbe fare il lavoro quando si tratta di modelli HTML pratici o progetti di portfolio.

è Mobile

Qui abbiamo un'altra versione della proprietà User-Agent Navigator di Kai Mallea. Sebbene sia ancora una soluzione semplicistica, mi piace che isMobile fornisca una varietà di specifiche. Ad esempio, puoi testare qualsiasi dispositivo mobile o uno specifico come telefono o tablet .

reagisci-rileva-dispositivo

Sei uno sviluppatore React.js?

Allora questa libreria di Michael Laktionov è per te. Funziona come ci si aspetterebbe: prima la libreria rileva il tipo di dispositivo, quindi esegue il rendering della vista in base a quel tipo. Funziona perfettamente con l'integrazione dei componenti e può essere ulteriormente personalizzato tramite chiamate API.

Un fatto interessante è il numero di selettori inclusi in questa libreria. Copre dispositivi come smart TV, dispositivi indossabili, una varietà di dispositivi iPhone e molto altro. Questo ti offre un'ampia selezione di scelte di design durante la creazione di un'app per un dispositivo specifico.