Share
Quando crei app Web mobili come le nostre serie di temi wordpress, è importante essere in grado di rilevare un browser mobile e offrire la versione mobile appropriata. Molti lettori hanno richiesto informazioni su come farlo nei commenti, quindi eccolo qui! In primo luogo, copriremo una soluzione wordpress, quindi una soluzione PHP e quindi una soluzione già esistente. Alla fine di questo tutorial, sarete esposti all'intero spettro di opzioni e ben equipaggiati per gestire questo scenario!
Con wordpress, abbiamo già un sacco di strumenti per aiutarci, inclusi i plugin. C'è un plug-in formidabile MobilePress. MobilePress consente agli utenti di wordpress di utilizzare automaticamente un tema mobile per utenti mobili, ma ancora più importante, il plug-in consente di caricare e utilizzare i temi mobili personalizzati. Questo ci consentirà di caricare il tema che abbiamo creato e servirlo solo ai browser mobili che visitano il sito.
Carica MyTouch
Per utilizzare un secondo tema per dispositivi mobili per un sito, devi prima definire la directory in cui metterli in MobilePress. Se fai clic su MobilePress sul pannello laterale dell'amministratore di wordpress, vedrai un campo di input per questa directory. Di default, la directory è wp-content / mobil-temi. Ci atterremo a questo.
Carica il tema in questa directory, quindi fai clic su MobilePress> Temi e seleziona il nostro tema.
Fare clic sul tema per abilitarlo per il browser mobile predefinito. Quindi fare clic sul menu a discesa Browser predefinito. Seleziona il browser iPhone e fai clic su cambia. Quindi fai nuovamente clic sul tema myTouch per selezionarlo per il browser Safari iOS. Il browser predefinito è per tutti i dispositivi mobili oltre all'iPhone.
Test di iPhone
Test di Android
Ora possiamo servire il tema appropriato a tutti gli utenti! Ma cosa succede se non stai usando WordPress?
Non esiste una funzione PHP come is_mobile () o qualcosa (anche se esiste una funzione get_browser (), ma questo è un altro articolo!). Quello che dobbiamo fare è rilevare il tipo di browser. Quindi, in base a tali informazioni, reindirizzeremo l'utente a un URL specifico. Ad ogni browser sono associate alcune informazioni che il server rileva. Questo è chiamato il agente utente. L'agente utente è fondamentalmente il nome di ciascun browser. No, non solo il nome, come Internet Explorer o Safari, ma l'intero nome che racconta la storia del browser. Ciò include la versione del sistema operativo, la piattaforma, ecc. Come probabilmente supponiamo, possiamo fare molto con un agente utente. Potremmo indirizzare un utente in base al suo sistema operativo o anche solo alla sua versione del sistema operativo. In questo modo alcuni siti Web, ad esempio una pagina di download del software, forniranno automaticamente la versione corretta del loro software.
Come ottenere il tipo di browser
Risulta che possiamo accedere all'agente utente del browser tramite una matrice di variabili super globali denominata $ _SERVER []. L'array del server ci consente di ottenere molte informazioni, ma quello che vogliamo è l'agente del browser:
$ _SERVER [ 'HTTP_USER_AGENT']
Questa variabile ci darà molte informazioni, ma varierà da browser a browser. Ecco il mio:
Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit / 533.4 (KHTML, come Gecko) Chrome / 5.0.375.125 Safari / 533.4>
Puoi dire quale browser sto usando? Safari? No, Chrome. Scusa, ti ho dato uno scherzoso! L'agente utente di Chrome è un po 'complicato in quanto è basato sul WebKit di Apple. Ora che abbiamo questa variabile, che cosa ne faremo?
La procedura
Prima di andare oltre, dobbiamo pensare a cosa esattamente vogliamo fare. Vogliamo rilevare l'agente utente usando la variabile globale sopra, ma allora cosa? Una semplice istruzione IF per verificare se l'agente utente sopra corrisponde a un elenco di agenti utente funzionerebbe. Se lo fa, possiamo semplicemente reindirizzare l'utente alla versione mobile.
Espressioni regolari:
Il problema con l'user agent è che lo è così unico per l'impostazione di ogni persona. Esistono diverse centinaia di versioni di browser, molti sistemi operativi diversi e versioni multiple di ognuno di questi sistemi e piattaforme. Ci sono letteralmente migliaia di possibili combinazioni che potrebbe essere un agente utente. Sarebbe semplicemente inefficiente, non inclusivo e inflessibile se cercassimo di far corrispondere esattamente le stringhe alla vecchia maniera. Invece, useremo il modo intelligente e agile. Useremo le espressioni regolari. Ora, se ti vergogni di menzionare la frase "espressione regolare", va bene. Comprendi il potere simile ai ninja che le espressioni regolari ci danno. Questo non è un tutorial sulle espressioni regolari. Hai bisogno di un'intera serie per questo. Come questo dal grande Jeffrey Way. Fortunatamente, non abbiamo bisogno di nulla di complicato per questa situazione, quindi non sarà troppo difficile.
preg_match ()
Preg_match () è una funzione di espressione regolare di PHP che cerca un determinato pattern come una stringa in una stringa più grande. Preg_match è molto capace, ma ci concentreremo solo sulle basi. Questo è tutto ciò di cui ti devi preoccupare:
$ pattern = "Il modello di stringa più piccola che stiamo cercando" $ subject = "Il corpo di testo più grande che stiamo cercando non deve essere una stringa, ma in questo caso lo sarà. essere il programma utente. In questo caso la stringa del modello non è qui, quindi non si troveranno risultati "preg_match (stringa $ modello, stringa $ oggetto)
La cosa bella di questo è che usa espressioni regolari quindi abbiamo un sacco di flessibilità. Se vogliamo cercare tra maiuscole e minuscole, possiamo:
Accentsconagua
// L'i dopo il delimitatore crea una ricerca senza distinzione tra maiuscole / minuscole preg_match ("/ iPhone / i", "iphone è un ottimo telefono.") Se vogliamo cercare parole intere, possiamo farlo anche noi:
// La b nel delimitatore di pattern indica un limite di parola. Ciò impedirà eventuali corrispondenze parziali come "iPhoney" preg_match ("/ \ biPhone \ b / i", "iphone è un ottimo dispositivo ...") Mettendo questo insieme con una dichiarazione IF
Ora dobbiamo metterlo insieme a una dichiarazione IF per verificare i risultati. Questo è piuttosto semplice:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone / i', $ agent)) echo "Stai usando un iPhone."; Come puoi vedere, la precedente ricerca solo gli iPhone. Quando viene rilevato un iPhone, lo script eseguirà l'istruzione echo.
Estendere la ricerca
Più siamo completi, più dispositivi telefonici copriremo, ma stiamo creando una gigantesca lista di dispositivi mobili qui. Fortunatamente, non abbiamo bisogno di ripetere la funzione. Questo è quello che ti mostrerò dopo. Semplicemente aggiungendo un carattere pipe (ad es. |), Possiamo creare essenzialmente un'istruzione OR:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone | Android | Blackberry / i', $ agent)) echo "Stai utilizzando un dispositivo mobile."; Anche se rappresentiamo la stragrande maggioranza dei browser mobili elencando solo questi tre dispositivi, il resto della piccola percentuale residua di utilizzo dei dispositivi mobili è distribuito tra molti altri telefoni. Per ora, invece di elencare centinaia di telefoni, lo lasceremo a questo. Vedrai più avanti in questo tutorial come affronteremo questo problema.
Reindirizzare
Una volta che il browser viene rilevato come mobile, dobbiamo reindirizzare a una pagina mobile. Possiamo semplicemente usare la funzione di intestazione PHP per questo. Tutto quello che devi fare è specificare una posizione. Ecco lo script completo:
L'uscita si limita a garantire che non eseguiremo nient'altro prima del reindirizzamento.
Ora che conosci la teoria che sta dietro al rilevamento e al reindirizzamento del browser, possiamo parlare di altre opzioni. DetectMobileBrowser.com è una grande risorsa. Non solo forniscono un servizio web, ma forniscono anche una soluzione open source per quasi tutte le lingue in cui ti serve. La parte migliore però è il tempo necessario per creare un modello molto più ampio di potenziali stringhe del browser per la ricerca su dispositivi mobili attraverso. Questo rende la lista molto più completa.
Se non ti dispiace avere un link di terze parti, l'utilizzo del semplice servizio web è un'ottima soluzione. Puoi indirizzare gli utenti al link facile da generare e il sito li invierà a un URL diverso a seconda che si tratti di un browser mobile o meno. È molto semplice nella struttura. http://detectmobilebrowser.com/desktopulr|mobileurl
Se non si desidera utilizzare un collegamento di terze parti, è possibile scaricare uno script nella lingua desiderata facendo clic su Scarica gli script. Questo rivelerà 10 diverse opzioni. Se guardi la fonte, vedrai che questa lista è decisamente completa come si ottiene, ed è un metodo molto simile al nostro. Da lì, puoi implementarlo sul tuo server o sito.
Dopo averlo scaricato, implementalo sul tuo server come faresti con quello che abbiamo creato. L'unica cosa che devi cambiare è l'URL di reindirizzamento:
Ora che abbiamo coperto il rilevamento del browser mobile, la teoria alla base e alcune soluzioni popolari, dovresti essere ben attrezzato per implementare un sistema simile nei tuoi progetti! Spero tu abbia trovato questo tutorial informativo e utile, e fammi sapere se hai domande o commenti nella sezione commenti!
