Share
När du skapar mobilwebapplikationer som vår Wordpress-temaserie är det viktigt att kunna upptäcka en mobilwebbläsare och servera lämplig mobilversion. Många läsare begärde information om hur man gör det i kommentarerna, så här är det! Först kommer vi att täcka en wordpress-lösning, då en PHP-lösning, och sedan en populär befintlig lösning. Vid slutet av denna handledning kommer du att bli utsatt för hela spektret av alternativ och välutrustade för att hantera detta scenario!
Med WordPress har vi många verktyg där ute för att hjälpa oss, inklusive plugins. En fantastisk plugin där ute är MobilePress. MobilePress låter wordpress-användare automatiskt använda ett mobiltema för mobilanvändare, men ännu viktigare, plugin gör att anpassade mobila teman kan laddas upp och användas. Detta gör det möjligt för oss att ladda upp det tema vi skapade och tjäna det till endast de mobila webbläsare som besöker webbplatsen.
Ladda upp MyTouch
För att kunna använda ett andra mobiltema för en webbplats måste du först definiera katalogen där du kommer att lägga in dina mobila teman i MobilePress. Om du klickar på MobilePress på WordPress admin-sidpanelen ser du ett inmatningsfält för den här katalogen. Som standard är katalogen wp-content / mobil-teman. Vi kommer att hålla fast vid det.
Ladda upp ditt tema till den här katalogen och klicka sedan på MobilePress> Teman och välj vårt tema.
Klicka på temat för att aktivera det för standardwebbläsaren. Klicka sedan på rullgardinsmenyn Standardwebbläsare. Välj iPhone-webbläsare och klicka på Ändra. Klicka sedan på myTouch-temat igen för att välja det för iOS Safari-webbläsaren. Standardwebbläsaren är för alla mobila enheter förutom iPhone.
iPhone-testning
Android Testing
Nu kan vi tjäna lämpligt tema till alla användare! Men vad händer om du inte kör WordPress?
Det finns ingen PHP-funktion som is_mobile () eller något (även om det finns en get_browser () -funktion, men det är en annan artikel!). Vad vi behöver göra är att upptäcka webbläsartypen. Då, baserat på den informationen, kommer vi att omdirigera användaren till en specifik webbadress. Varje webbläsare har lite information kopplad till den som servern upptäcker. Detta kallas användaragent. Användaragenten är i princip namnet på varje webbläsare. Nej, inte bara förnamnet, som Internet Explorer eller Safari, men hela namnet som berättar webbläsarens historia. Detta inkluderar OS-version, plattform, etc. Som du antagligen kan gissa kan vi göra mycket med en användaragent. Vi kunde styra en användare baserat på hans eller hennes operativsystem eller till och med bara deras version av operativsystemet. Så här kommer vissa webbplatser, till exempel en nedladdningssida, automatiskt att ge dig rätt version av programvaran.
Så här får du webbläsartyp
Det visar sig att vi kan komma åt webbläsarens användaragent genom en super global variabel array som heter $ _SERVER []. Serverservern tillåter oss att få mycket information, men vad vi vill är webbläsaren:
$ _SERVER [ 'HTTP_USER_AGENT']
Denna variabel ger oss mycket information, men varierar från webbläsare till webbläsare. Här är min:
Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit / 533.4 (KHTML, som Gecko) Chrome / 5.0.375.125 Safari / 533.4>
Kan du berätta vilken webbläsare jag använder? Safari? Nej, Chrome. Tyvärr, jag gav dig en knepig! Chromes användaragent är lite knepigt eftersom det är baserat på Apples webbkit. Nu när vi har denna variabel, vad ska vi göra med det?
Proceduren
Innan vi går längre måste vi tänka på vad vi vill göra. Vi vill upptäcka användaragenten med hjälp av den globala variabeln ovan, men då vad? Ett enkelt IF-uttalande för att kontrollera om användaragenten ovan matchar en lista med användaragenter skulle fungera. Om det gör kan vi helt enkelt omdirigera användaren till mobilversionen.
Vanliga uttryck:
Problemet med användaragenten är det så unikt för varje persons inställning. Det finns många hundra olika versioner av webbläsare, många olika operativsystem och flera versioner av alla dessa system och plattformar. Det finns bokstavligen tusentals möjliga kombinationer som en användaragent kan vara. Det skulle helt enkelt vara ineffektivt, icke-inkluderande och oflexibelt om vi försökte exakt matcha strängar på det gamla modet sättet. I stället kommer vi att använda det smarta och smidiga sättet. Vi använder regelbundna uttryck. Nu, om du cringed vid nämna av frasen "regelbundet uttryck", det är okej. Du förstår den ninjaliknande kraft som regelbundna uttryck ger oss. Detta är inte en handledning om reguljära uttryck. Du behöver en hel serie för det. Gilla den här av den stora Jeffrey Way. Lyckligtvis behöver vi inte något komplicerat för den här situationen, så det blir inte för svårt.
preg_match ()
Preg_match () är en vanlig PHP-funktion som söker efter ett visst mönster som en sträng i en större sträng. Preg_match är mycket skicklig, men vi fokuserar bara på grunderna. Det här är allt du behöver oroa dig för:
$ pattern = "Mönstret av mindre sträng vi söker efter" $ subject = "Den större textkroppen som vi söker. Det behöver inte vara en sträng, men i det här fallet blir det. vara användaragenten. I detta fall är mönstresträngen inte här så inga resultat kommer att hittas "preg_match (string $ pattern, string $ subject)
Det fina med det här är att det använder vanliga uttryck så att vi har massor av flexibilitet. Om vi vill söka fallet okänsligt kan vi:
Accentsconagua
// Jag efter avgränsaren skapar en obestridlig sökning preg_match ("/ iPhone / i", "iphone är en bra telefon.") Om vi vill söka efter hela ord matcher kan vi också göra det:
// B i mönstret avgränsaren anger ett ordgräns. Detta förhindrar några partiella matcher som "iPhoney" preg_match ("/ \ biPhone \ b / i", "iphone är en bra enhet ...") Sätter detta ihop med ett IF-uttalande
Vi behöver nu lägga det här tillsammans med ett IF-uttalande för att kontrollera resultat. Det här är ganska enkelt:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; om (preg_match ('/ iPhone / i', $ agent)) echo "Du använder en iPhone."; Som du kan se, söker ovanstående bara efter iPhones. När en iPhone detekteras, kommer skriptet att exekvera ekotillståndet.
Utöka sökningen
Ju mer omfattande vi får, ju fler telefonapparater vi kommer att täcka, men vi skapar verkligen en jätte tvättlista av mobila enheter här. Lyckligtvis behöver vi inte upprepa funktionen. Det är vad jag ska visa dig nästa. Genom att helt enkelt lägga till ett rörtecken (dvs |) kan vi skapa väsentligen ett OR-uttalande:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; om (preg_match ('/ iPhone | Android | Blackberry / i', $ agent)) echo "Du använder en mobil enhet."; Även om vi står för en stor majoritet av mobila webbläsare genom att bara notera de tre enheterna, är resten av den små remaing-procenten av mobilanvändningen spridet bland många andra telefoner. För nu, istället för att lista ut hundratals telefoner, lämnar vi det där. Du kommer att se senare i denna handledning hur vi ska ta itu med detta problem.
Dirigera om
När webbläsaren är upptäckt som mobil måste vi vidarebefordra till en mobil sida. Vi kan helt enkelt använda PHP-header-funktionen för detta. Allt du behöver göra är att ange en plats. Här är det fullständiga skriptet:
Utgången gör att vi inte utför något annat innan omdirigeringen.
Nu när du känner till teorin bakom webbläsardetektering och omdirigering kan vi prata om andra alternativ. DetectMobileBrowser.com är en bra resurs. Inte bara tillhandahåller de en webbtjänst, men de ger också en öppen källkodslösning för nästan vilket språk du behöver. Den bästa delen är dock att de tog sig tid att skapa ett mycket större mönster av mobila webbläsares potentiella strängar för att söka genom. Detta gör listan mycket mer noggrann.
Om du inte har något emot en tredje partlänk, är det enkelt att använda den enkla webbtjänsten. Du kan rikta användare till länken som är enkel att generera, och webbplatsen skickar dem till en annan URL beroende på om det är en mobil webbläsare eller ej. Det är väldigt enkelt i struktur. http://detectmobilebrowser.com/desktopulr|mobileurl
Om du inte vill använda en tredjeparts länk kan du hämta ett skript i ditt valfria språk genom att klicka på Hämta skript. Detta kommer att avslöja 10 olika alternativ. Om du tittar på källan ser du att denna lista är definitivt så omfattande som den blir och är en väldigt likartad metod för oss. Därifrån kan du implementera det på din egen server eller webbplats.
När du har laddat ner, implementera det på din server som om du skulle den som vi skapade. Det enda du behöver ändra är omdirigeringsadressen:
Nu när vi täckte upptäckt av mobila webbläsare, teorin bakom det och några populära lösningar, borde du vara väl rustad att implementera ett liknande system i dina egna projekt! Jag hoppas att du hittade denna handledning informativ och användbar, och låt mig veta om du har några frågor eller kommentarer i kommentarfältet!
