Share
Atunci când creați aplicații web mobile cum ar fi seria de teme wordpress, este important să puteți detecta un browser mobil și să difuzați versiunea mobilă corespunzătoare. Mulți cititori au solicitat informații despre cum să facă acest lucru în comentarii, deci aici este! În primul rând, vom acoperi o soluție wordpress, apoi o soluție PHP, și apoi o soluție populară existentă. Până la sfârșitul acestui tutorial, veți fi expus la întregul spectru de opțiuni și bine echipat pentru a face față acestui scenariu!
Cu wordpress, avem deja o mulțime de instrumente care să ne ajute, inclusiv pluginurile. Un plugin extraordinar este acolo MobilePress. MobilePress permite utilizatorilor de wordpress să utilizeze automat o temă mobilă pentru utilizatorii mobili, dar mai important, pluginul permite încărcarea și utilizarea unor teme mobile personalizate. Acest lucru ne va permite să încărcăm tema pe care am creat-o și să o afișăm doar pentru browserele mobile care accesează site-ul.
Încărcați MyTouch
Pentru a utiliza o a doua temă mobilă pentru un site, trebuie mai întâi să definiți directorul în care veți pune teme mobile în MobilePress. Dacă faceți clic pe MobilePress pe panoul de administrare wordpress admin, veți vedea un câmp de introducere pentru acest director. Implicit, directorul este wp-content / mobil-teme. Vom rămâne cu asta.
Încărcați tema în acest director, apoi faceți clic pe MobilePress> Teme și selectați tema noastră.
Faceți clic pe temă pentru a activa această opțiune pentru browserul mobil implicit. Apoi faceți clic pe meniul derulant implicit Browser. Selectați browserul iPhone și faceți clic pe schimbare. Apoi faceți clic pe tema myTouch din nou pentru ao selecta pentru browserul Safari pentru iOS. Browserul implicit este pentru toate dispozitivele mobile, în afară de iPhone.
Testarea iPhone
Testarea Android
Acum putem servi tema potrivită tuturor utilizatorilor! Dar dacă nu rulați WordPress?
Nu există nici o funcție PHP ca is_mobile () sau nimic (deși există o funcție get_browser (), dar acesta este un articol diferit!). Ceea ce trebuie să facem este să detectăm tipul de browser. Apoi, pe baza acestor informații, vom redirecționa utilizatorul către o anumită adresă URL. Fiecare browser are cateva informatii atasate de acesta pe care serverul le detecteaza. Aceasta se numește agent utilizator. Agentul utilizator este, în principiu, numele fiecărui browser. Nu, nu doar primul nume, cum ar fi Internet Explorer sau Safari, ci întregul nume care spune povestea browserului. Aceasta include versiunea de sistem de operare, platforma, etc. După cum probabil ați putea ghici, putem face o mulțime cu un agent utilizator. Am putea direcționa un utilizator pe baza sistemului de operare sau chiar a versiunii sistemului de operare. Acesta este modul în care unele site-uri web, de exemplu o pagină de descărcare de software, vă vor oferi automat versiunea corectă a software-ului lor.
Cum se obține tipul de browser
Se pare că putem accesa agentul de utilizator al browserului printr-o matrice superplă globală superplă numită $ _SERVER []. Matricea serverului ne permite să obținem o mulțime de informații, dar ceea ce dorim este agentul de browser:
$ _SERVER [ 'HTTP_USER_AGENT']
Această variabilă ne va oferi o mulțime de informații, dar va varia de la browser la browser. Aici este a mea:
Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit / 533.4 (KHTML, ca Gecko) Chrome / 5.0.375.125 Safari /
Îți poți spune ce browser folosesc? Safari? Nu, Chrome. Îmi pare rău, ți-am dat un lucru complicat! Agentul de utilizator Chrome este un pic dificil, deoarece se bazează pe WebKit-ul Apple. Acum, când avem această variabilă, ce vom face cu ea?
Procedura
Înainte de a merge mai departe, trebuie să ne gândim ce anume vrem să facem. Vrem să detectăm agentul utilizator folosind variabila globală de mai sus, dar apoi ce? O simplă instrucțiune IF pentru a verifica dacă agentul de utilizator de mai sus se potrivește cu o listă de agenți utilizator ar funcționa. În caz contrar, putem redirecționa pur și simplu utilizatorul la versiunea mobilă.
Expresii obisnuite:
Problema cu agentul de utilizator este asta asa de unic pentru configurarea fiecărei persoane. Există multe sute de versiuni diferite de browsere, multe sisteme de operare diferite și versiuni multiple ale fiecăruia dintre aceste sisteme și platforme. Există literalmente mii de combinații posibile care ar putea fi un agent utilizator. Ar fi pur și simplu ineficientă, non-incluzivă și inflexibilă dacă am încerca să potrivim exact șiruri de moda veche. În schimb, vom folosi modul inteligent și agil. Vom folosi expresii regulate. Acum, dacă te-ai întors la menționarea expresiei "expresie regulată", e în regulă. Înțelegi puterea de tip ninja pe care ne-o dau expresii regulate. Acesta nu este un tutorial despre expresiile regulate. Ai nevoie de o serie întreagă pentru asta. Ca și asta de marele Way Jeffrey. Din fericire, nu avem nevoie de nimic complicat pentru această situație, deci nu va fi prea dificil.
preg_match ()
Preg_match () este o funcție de expresie regulată în PHP care caută un anumit model ca un șir într-un șir mai mare. Preg_match este foarte capabil, dar ne vom concentra doar pe elementele de bază. Tot ce trebuie să vă faceți griji:
$ pattern = "Modelul de șir mai mic căutăm" $ subject = "Corpul mai mare de text pe care îl căutăm. Nu trebuie să fie un șir, dar în acest caz va fi. fi agentul de utilizator.În acest caz, șirul de șablon nu este aici, astfel că nu vor fi găsite rezultate "preg_match (șirul șablon $ șir, șir $ subiectul)
Ce-i frumos despre asta este că folosește expresii regulate, așa că avem o tensiune de flexibilitate. Dacă vrem să căutăm insensibil pentru case, putem:
Accentsconagua
// I după delimitator creează o căutare insensibilă pentru case preg_match ("/ iPhone / i", "iphone este un telefon excelent.") Dacă vrem să căutăm meciuri de cuvânt întregi, putem face și asta:
// b din delimitatorul de model indică o limită a cuvântului. Acest lucru va împiedica orice meciuri parțiale cum ar fi "iPhoney" preg_match ("/ \ biPhone \ b / i", "iPhone este un dispozitiv minunat ...") Prezentarea împreună cu o declarație IF
Acum trebuie să punem acest lucru împreună cu o declarație IF pentru a verifica rezultatele. Acest lucru este destul de simplu:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; dacă (preg_match ('/ iPhone / i', $ agent)) echo "Folosiți un iPhone"; După cum puteți vedea, cele de mai sus caută numai iPhone-urile. Când se detectează un iPhone, scriptul va executa instrucțiunea ecou.
Extindeți căutarea
Cu cât avem mai multe computere, cu atât mai multe dispozitive de telefon pe care le vom acoperi, dar noi chiar creăm o listă uriașă de rufe de dispozitive mobile aici. Din fericire, nu trebuie să repetăm funcția. Asta vă voi arăta în continuare. Prin adăugarea pur și simplu a unui caracter de țeavă (adică |), putem crea în esență o instrucțiune OR:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; dacă (preg_match ('/ iPhone | Android | Blackberry / i', $ agent)) echo "Folosiți un dispozitiv mobil."; Deși reprezentăm o vastă majoritate de browsere mobile, prin listarea celor trei dispozitive, restul procentului redus de utilizare a telefonului mobil este răspândit printre multe alte telefoane. Pentru moment, în loc să enumerăm sute de telefoane, vom lăsa la asta. Veți vedea mai târziu în acest tutorial cum vom aborda această problemă.
Redirecţiona
Odată ce browserul este detectat ca mobil, trebuie să redirecționăm către o pagină mobilă. Putem pur și simplu utiliza funcția antet PHP pentru acest lucru. Tot ce trebuie să faceți este să specificați o locație. Iată scriptul complet:
Ieșirea se asigură că nu executăm nimic înainte de redirecționare.
Acum că știți teoria din spatele detectării și redirecționării browserului, putem vorbi despre alte opțiuni. DetectMobileBrowser.com este o resursă excelentă. Nu numai că furnizează un serviciu web, dar oferă și o soluție open source pentru aproape orice limbă de care aveți nevoie. Cea mai bună parte, totuși, au făcut timp pentru a crea un șir mult mai amplu de șiruri de potențial pentru browserul mobil pentru a căuta prin. Acest lucru face ca lista să fie mult mai detaliată.
Dacă nu vă deranjează să aveți o legătură terță parte, folosirea serviciului web simplu este o soluție excelentă. Puteți direcționa utilizatorii către link-ul ușor de generat și site-ul le va trimite la o altă adresă URL în funcție de tipul de browser mobil sau nu. E foarte simplu în structură. http://detectmobilebrowser.com/desktopulr|mobileurl
Dacă nu doriți să utilizați o legătură terță parte, puteți să descărcați un script în limba dorită, făcând clic pe Descărcați Scripturi. Aceasta va dezvălui 10 opțiuni diferite. Dacă vă uitați la sursă, veți vedea că această listă este la fel de cuprinzătoare pe cât se întâmplă și este o metodă foarte asemănătoare cu cea a noastră. De acolo, îl puteți implementa pe propriul server sau pe site-ul dvs..
După ce descărcați, implementați-o pe serverul dvs., așa cum ați creat-o. Singurul lucru pe care trebuie să îl modificați este adresa URL de redirecționare:
Acum că am acoperit detectarea browserului mobil, teoria din spatele acestuia și unele soluții populare ar trebui să fii bine echipat pentru a implementa un sistem similar în proiectele tale! Sper că ați găsit acest tutorial informativ și util și spuneți-mi dacă aveți întrebări sau observații în secțiunea de comentarii!
