Share
Bij het maken van mobiele web-apps zoals onze WordPress-themareeks is het belangrijk om een mobiele browser te kunnen detecteren en de juiste mobiele versie te kunnen gebruiken. Veel lezers vroegen informatie over hoe dit te doen in de reacties, dus hier is het! Eerst behandelen we een WordPress-oplossing, vervolgens een PHP-oplossing en vervolgens een populaire bestaande oplossing. Aan het einde van deze tutorial zul je worden blootgesteld aan het hele scala aan opties en goed uitgerust om dit scenario aan te pakken!
Met WordPress hebben we al veel tools om ons te helpen, inclusief plug-ins. Een geweldige plug-in die er is MobilePress. Met MobilePress kunnen gebruikers van wordpress automatisch een mobiel thema gebruiken voor mobiele gebruikers, maar wat nog belangrijker is, Met de plug-in kunnen aangepaste mobiele thema's worden geüpload en gebruikt. Hierdoor kunnen we het thema dat we hebben gemaakt uploaden naar de mobiele browsers die de site bezoeken.
Upload MyTouch
Als u een tweede mobiel thema voor een site wilt gebruiken, moet u eerst de directory definiëren waarin u uw mobiele thema's in MobilePress plaatst. Als u op MobilePress op het zijpaneel van wordpress admin klikt, ziet u een invoerveld voor deze map. Standaard is de map wp-content / mobile-thema. Daar blijven we bij.
Upload uw thema naar deze map en klik vervolgens op MobilePress> Thema's en selecteer ons thema.
Klik op het thema om het in te schakelen voor de standaard mobiele browser. Klik vervolgens op de vervolgkeuzelijst Standaard browser. Selecteer de iPhone-browser en klik op Wijzigen. Klik vervolgens opnieuw op het myTouch-thema om het te selecteren voor de iOS Safari-browser. De standaardbrowser is voor alle mobiele apparaten naast de iPhone.
iPhone testen
Android-testen
Nu kunnen we het juiste thema aan alle gebruikers aanbieden! Maar wat als u WordPress niet gebruikt??
Er is geen PHP-functie zoals is_mobile () of iets anders (hoewel er een get_browser () -functie is, maar dat is een ander artikel!). Wat we moeten doen is het browsertype detecteren. Vervolgens, op basis van die informatie, zullen we de gebruiker omleiden naar een specifieke URL. Aan elke browser is een beetje informatie gekoppeld die de server detecteert. Dit wordt het user agent. De user-agent is eigenlijk de naam van elke browser. Nee, niet alleen de voornaam, zoals Internet Explorer of Safari, maar de volledige naam die het verhaal van de browser vertelt. Dit omvat de OS-versie, het platform, enz. Zoals je waarschijnlijk wel zou raden, kunnen we veel doen met een user-agent. We zouden een gebruiker kunnen leiden op basis van zijn of haar besturingssysteem of zelfs alleen hun versie van het besturingssysteem. Dit is hoe sommige websites, bijvoorbeeld een pagina voor het downloaden van software, u automatisch de juiste versie van hun software zullen geven.
Hoe browsertype te krijgen
Het blijkt dat we toegang hebben tot de user-agent van de browser via een super globale variabele array genaamd $ _SERVER []. Met de serverarray kunnen we veel informatie verzamelen, maar wat we willen is de browseragent:
$ _SERVER [ 'HTTP_USER_AGENT']
Deze variabele geeft ons veel informatie, maar varieert van browser tot browser. Hier is de mijne:
Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10_6_4; nl-NL) AppleWebKit / 533.4 (KHTML, like Gecko) Chrome / 5.0.375.125 Safari / 533.4>
Kun je zien welke browser ik gebruik? Safari? Nee, Chrome. Sorry, ik gaf je een lastige! De user-agent van Chrome is een beetje lastig, omdat deze is gebaseerd op Apple's WebKit. Nu we deze variabele hebben, wat gaan we ermee doen?
De procedure
Voordat we verder gaan, moeten we nadenken over wat we precies willen doen. We willen de user-agent detecteren met behulp van de bovenstaande globale variabele, maar wat dan? Een eenvoudige IF-instructie om te controleren of de bovenstaande user-agent overeenkomt met een lijst met user-agents zou werken. Als dit het geval is, kunnen we de gebruiker eenvoudig doorverwijzen naar de mobiele versie.
Normale uitdrukkingen:
Het probleem met de user-agent is het zo uniek voor de opstelling van elke persoon. Er zijn vele honderden verschillende versies van browsers, veel verschillende besturingssystemen en meerdere versies van elk van die systemen en platforms. Er zijn letterlijk duizenden mogelijke combinaties die een user-agent zou kunnen zijn. Het zou simpelweg inefficiënt, niet-inclusief en inflexibel zijn als we geprobeerd zouden hebben om op een ouderwetse manier precies bij de snaren te passen. In plaats daarvan zullen we de slimme en behendige manier gebruiken. We gebruiken reguliere expressies. Welnu, als je kromt in de vermelding van de uitdrukking "reguliere expressie", dan is dat goed. Je begrijpt de ninja-achtige kracht die reguliere expressies ons geven. Dit is geen zelfstudie over reguliere expressies. Daar heb je een hele reeks voor nodig. Zoals deze van de geweldige Jeffrey Way. Gelukkig hebben we voor deze situatie niets ingewikkelds nodig, dus het zal niet zo moeilijk zijn.
preg_match ()
Preg_match () is een PHP reguliere expressiefunctie die zoekt naar een bepaald patroon zoals een string in een grotere string. Preg_match is erg capabel, maar we zullen ons alleen concentreren op de basis. Dit is alles wat je nodig hebt om je zorgen over te maken:
$ pattern = "Het patroon van kleinere string waar we naar zoeken" $ subject = "De grotere hoeveelheid tekst die we zoeken. Dit hoeft geen string te zijn, maar in dit geval zal het dat wel zijn. de user-agent zijn.In dit geval is de patroonreeks hier niet, dus er worden geen resultaten gevonden "preg_match (string $ pattern, string $ subject)
Het leuke hiervan is dat het reguliere expressies gebruikt, dus we hebben een heleboel flexibiliteit. Als we niet-hoofdlettergevoelig willen zoeken, kunnen we:
Accentsconagua
// De i na het scheidingsteken maakt een hoofdletterongevoelige zoekopdracht preg_match ("/ iPhone / i", "iphone is een geweldige telefoon.") Als we naar woordcombinaties willen zoeken, kunnen we dat ook doen:
// De b in het patroonscheidingsteken geeft een woordgrens aan. Dit voorkomt gedeeltelijke overeenkomsten zoals "iPhoney" preg_match ("/ \ biPhone \ b / i", "iphone is een geweldig apparaat ...") Dit samenvoegen met een IF-verklaring
We moeten dit nu samenvoegen met een IF-verklaring om te controleren op resultaten. Dit is vrij eenvoudig:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone / i', $ agent)) echo "U gebruikt een iPhone."; Zoals je ziet, zoekt het bovenstaande alleen naar iPhones. Wanneer een iPhone wordt gedetecteerd, voert het script de echo-instructie uit.
De zoekopdracht uitbreiden
Hoe uitgebreider we worden, hoe meer telefoonapparaten we zullen gebruiken, maar we creëren hier echt een gigantische waslijst met mobiele apparaten. Gelukkig hoeven we de functie niet te herhalen. Dat is wat ik je hierna zal laten zien. Door simpelweg een pijpkarakter (d.w.z.) toe te voegen, kunnen we in wezen een OF-statement maken:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone | Android | Blackberry / i', $ agent)) echo "U gebruikt een mobiel apparaat."; Hoewel we een enorme meerderheid van mobiele browsers voor hun rekening nemen door slechts die drie apparaten te vermelden, is de rest van het kleine resterende percentage mobiel gebruik verspreid over vele andere telefoons. Voor nu, in plaats van honderden telefoons op te sommen, zullen we het daarbij laten. Je zult later in deze tutorial zien hoe we dit probleem zullen aanpakken.
redirect
Zodra de browser als mobiel is gedetecteerd, moeten we omleiden naar een mobiele pagina. We kunnen hiervoor eenvoudig de PHP-headerfunctie gebruiken. Het enige dat u hoeft te doen, is een locatie opgeven. Hier is het volledige script:
De exit zorgt er gewoon voor dat we niets anders vóór de omleiding uitvoeren.
Nu u de theorie achter browserdetectie en omleiding kent, kunnen we praten over andere opties. DetectMobileBrowser.com is een geweldige bron. Ze bieden niet alleen een webservice, maar bieden ook een open source-oplossing voor bijna elke taal waarin u deze nodig hebt. Het beste deel is echter dat ze de tijd hebben genomen om een veel groter patroon van mobiele browser potentiële snaren te maken om te zoeken door. Dit maakt de lijst veel grondiger.
Als u het niet erg vindt om een link van derden te hebben, is het gebruik van de eenvoudige webservice een geweldige oplossing. U kunt gebruikers verwijzen naar de eenvoudig te genereren link en de site stuurt ze naar een andere URL, afhankelijk van of het een mobiele browser is of niet. Het is heel eenvoudig qua structuur. http://detectmobilebrowser.com/desktopulr|mobileurl
Als u geen link van derden wilt gebruiken, kunt u een script downloaden in uw taal naar keuze door op te klikken Download scripts. Dit zal 10 verschillende opties onthullen. Als je naar de bron kijkt, zul je zien dat deze lijst absoluut zo volledig is als mogelijk, en een zeer vergelijkbare methode is als de onze. Van daaruit kunt u het op uw eigen server of op uw eigen site implementeren.
Nadat u het hebt gedownload, implementeert u het op uw server zoals u zou hebben gemaakt. Het enige dat u moet wijzigen, is de omleidings-URL:
Nu we de detectie van mobiele browsers, de theorie erachter en enkele populaire oplossingen hebben behandeld, zou je goed uitgerust moeten zijn om een soortgelijk systeem in je eigen projecten te implementeren! Ik hoop dat je deze tutorial informatief en nuttig vond, en laat het me weten als je nog vragen of opmerkingen hebt in de comments!
