Cum să detectați browserele mobile cu JavaScript

Detectarea mobilului a fost întotdeauna un aspect crucial al dezvoltării aplicațiilor. Este relevant atât pentru aplicații, dar și pentru software și site-uri web. Există nenumărate motive pentru a verifica agenții de browser mobil. Cel mai important, capacitatea de a oferi o experiență unică de utilizator.

Numai biblioteca UAParser.js primește milioane de descărcări săptămânale de pachete. Și, în cele mai multe cazuri, este suficient dacă construiești ceva de la zero. Dar, cum rămâne cu modalitățile alternative de a detecta browserele mobile cu JavaScript?

Uneori s-ar putea să doriți doar o soluție simplă care să facă treaba fără biblioteci. Și în acest articol, vă voi prezenta o mână de tehnici JavaScript pentru detectarea utilizatorilor de dispozitive mobile. Anunță-mă dacă am ratat vreunul!

navigator.userAgent

Sfântul Graal al detectării browserului este proprietatea 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 }

Acesta este, desigur, un mod foarte primitiv de a face acest lucru. Poate fi manipulat cu ușurință deoarece proprietatea User-Agent poate fi falsificată. Dar, pentru că face treaba, îl puteți folosi în continuare într-o varietate de proiecte. De exemplu, pagini de destinație sau realizarea unei redirecționări personalizate către o versiune mobilă.

Cum să utilizați navigator.userAgent pentru a detecta tipul de browser și pentru a afișa conținut pe baza browserului specific?

Bine, deci, ar putea exista un caz de utilizare unic în care doriți să detectați un anumit browser, cum ar fi Chrome și Firefox (sau, în acest caz, Android și iPhone), și apoi să utilizați acele date pentru a afișa un anumit conținut. Această abordare este adesea folosită pentru a furniza/modifica link-urile de descărcare pentru anumite browsere.

Într-un astfel de caz, puteți utiliza următoarea funcție.

 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 + ""; }

Puteți comenta diferitele declarații „ else if ” pentru browserele pe care nu doriți să le verificați și, de asemenea, puteți adăuga browsere suplimentare pe care doriți să le verificați.

TouchEvent

O metodă de a detecta utilizatorii de telefonie mobilă este de a verifica dacă dispozitivul are un ecran tactil.

Folosind proprietatea GlobalEventHandlers.ontouchstart, puteți face o verificare simplă pentru a vedea cum a interacționat utilizatorul cu aplicația dvs. Dacă interacțiunea a venit de pe un ecran tactil, puteți returna o versiune mobilă a aplicației sau a paginii.

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

Dispozitivele cu ecran tactil precum Surface nu au această proprietate. Deci, utilizatorii care vin de pe dispozitive tactile bazate pe desktop vor vedea în continuare versiunea desktop a paginilor dvs.

Window.matchMedia()

Window.matchMedia() este una dintre cele mai bune proprietăți pentru detectarea utilizatorilor de telefonie mobilă cu JavaScript. Și este așa pentru că vă permite să interacționați direct cu CSS.

În multe cazuri, interogările media sunt superioare, deoarece au instrumente de detectare mobilă încorporate. De exemplu, puteți efectua un apel pentru a verifica dacă „pointer:coarse” este adevărat.

Această declarație specifică validează dacă indicatorul dispozitivului este fin sau grosier .

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

Alternativ, dispozitivul poate avea atât un indicator fin, cât și un indicator grosier. Pentru acest caz de utilizare, putem verifica dacă vreun indicator este grosier.

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

Rețineți că acest lucru validează doar interogarea ca adevărată sau falsă. O modalitate mai rafinată de a verifica dispozitivele mobile este utilizarea directă a interogărilor media.

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

Această interogare va verifica în mod direct lățimea maximă a dispozitivului și va afirma dacă corespunde criteriilor. Din nou, aceasta este destul de multă muncă pentru obținerea corectă a tuturor dispozitivelor. Ca atare, este mai ușor să utilizați o bibliotecă pre-construită cu toate tipurile de dispozitive deja definite.

Util în anumite contexte

De-a lungul anilor, au existat multe proprietăți JavaScript pentru detectarea tipurilor de dispozitive. Un număr mare dintre ele au fost depreciate, dar majoritatea celorlalți au fost integrate în biblioteci. Care se întâmplă să fie, de asemenea, cea mai bună modalitate de a face detectarea mobilă corectă.

Nu în ultimul rând, majoritatea cadrelor moderne includ deja detectarea mobilă ca parte a cadrului în sine. Merită să te uiți dacă nu vrei să faci toată treaba.

Biblioteci pentru detectarea dispozitivelor mobile

Pentru această secțiune, voi enumera cele mai populare biblioteci JavaScript pentru detectarea dispozitivelor mobile. Din nou, subliniez că acestea sunt specifice JavaScript. Consultați documentele pentru implementarea corectă în aplicația dvs.

UAParser.js

În ceea ce privește bibliotecile complete, UAParser este cel mai bun. Cu peste 10 milioane de descărcări săptămânale numai pe npm – UAParser este soluția de facto pentru detectarea dispozitivelor mobile. Așa cum o arată numele – biblioteca funcționează prin analizarea șirurilor User-Agent.

Cu toate acestea, ceea ce îl face atât de popular este faptul că puteți analiza sute de variante ale dispozitivului. Și toate acestea sunt foarte bine documentate. Puteți trece de la furnizori de dispozitive practice la modele de detectare mai complicate, cum ar fi arhitectura CPU.

mobile-detect.js

Acesta este un port destul de simplu al bibliotecii Mobile Detect pentru PHP, oferit comunității de Heinrich Goebl. Biblioteca în sine folosește User-Agent pentru detectare, așa cum am discutat mai devreme – nu este cea mai bună opțiune.

Totuși, ar trebui să facă treaba atunci când vine vorba de șabloane HTML practice sau proiecte de portofoliu.

esteMobil

Aici avem o altă abordare a proprietății User-Agent Navigator de la Kai Mallea. Deși este încă o soluție simplistă, îmi place că isMobile oferă o varietate de specificații. De exemplu, puteți testa orice dispozitiv mobil sau anumite dispozitive, cum ar fi telefonul sau tableta .

reacționează-dispozitiv-detectează

Sunteți dezvoltator React.js?

Atunci această bibliotecă de la Michael Laktionov este pentru tine. Funcționează așa cum v-ați aștepta – mai întâi biblioteca detectează tipul de dispozitiv, apoi redă vizualizarea pe baza acelui tip. Funcționează perfect cu integrarea componentelor și poate fi personalizat în continuare prin apeluri API.

Un fapt interesant este numărul de selectori pe care îi include această bibliotecă. Acoperă dispozitive precum televizoare inteligente, dispozitive purtabile, o varietate de dispozitive iPhone și multe altele. Acest lucru vă oferă o selecție largă de opțiuni de design atunci când creați o aplicație pentru un anumit dispozitiv.