Share
Wenn Sie mobile Web-Apps wie unsere WordPress-Themenserie erstellen, ist es wichtig, dass Sie einen mobilen Browser erkennen und die entsprechende mobile Version bereitstellen können. Viele Leser haben in den Kommentaren nach Informationen dazu gefragt, also hier! Zuerst behandeln wir eine WordPress-Lösung, dann eine PHP-Lösung und dann eine beliebte vorhandene Lösung. Am Ende dieses Tutorials werden Sie mit dem gesamten Spektrum an Optionen vertraut und für dieses Szenario gut gerüstet!
Mit WordPress haben wir bereits eine Menge Tools zur Verfügung, einschließlich Plugins. Es gibt ein tolles Plugin MobilePress. MobilePress ermöglicht Wordpress-Benutzern die automatische Verwendung eines mobilen Designs für mobile Benutzer, was jedoch noch wichtiger ist, Das Plugin ermöglicht das Hochladen und Verwenden von benutzerdefinierten mobilen Designs. Auf diese Weise können wir das von uns erstellte Design hochladen und nur für die mobilen Browser bereitstellen, die die Website besuchen.
Laden Sie MyTouch hoch
Um ein zweites mobiles Design für eine Website verwenden zu können, müssen Sie zunächst das Verzeichnis definieren, in dem Sie Ihre mobilen Designs in MobilePress ablegen. Wenn Sie in WordPress-Admin-Seite auf MobilePress klicken, wird ein Eingabefeld für dieses Verzeichnis angezeigt. Das Verzeichnis lautet standardmäßig WP-Inhalt / Mobile-Themes. Wir werden dabei bleiben.
Laden Sie Ihr Design in dieses Verzeichnis hoch und klicken Sie auf MobilePress> Designs und wählen Sie unser Thema.
Klicken Sie auf das Design, um es für den standardmäßigen mobilen Browser zu aktivieren. Klicken Sie dann auf die Dropdown-Liste Standardbrowser. Wählen Sie den iPhone-Browser aus und klicken Sie auf Ändern. Klicken Sie anschließend erneut auf das myTouch-Design, um es für den iOS Safari-Browser auszuwählen. Der Standardbrowser gilt für alle mobilen Geräte außer dem iPhone.
iPhone testen
Android-Test
Jetzt können wir allen Benutzern das passende Design anbieten! Was ist, wenn Sie nicht mit WordPress arbeiten??
Es gibt keine PHP-Funktion wie is_mobile () oder irgendetwas (obwohl es eine get_browser () - Funktion gibt, aber das ist ein anderer Artikel!). Was wir tun müssen, ist den Browsertyp zu erkennen. Basierend auf diesen Informationen leiten wir den Benutzer dann zu einer bestimmten URL um. Jeder Browser hat ein paar Informationen, die der Server erkennt. Dies nennt man das User-Agent. Der Benutzeragent ist im Wesentlichen der Name jedes Browsers. Nein, nicht nur der Vorname, wie Internet Explorer oder Safari, sondern der gesamte Name, der die Geschichte des Browsers erzählt. Dazu gehören die Betriebssystemversion, die Plattform usw. Wie Sie wahrscheinlich vermuten, können wir mit einem Benutzeragenten eine Menge tun. Wir könnten einen Benutzer auf der Grundlage seines oder ihres Betriebssystems oder auch nur seiner Betriebssystemversion anweisen. Auf diese Weise erhalten Sie auf einigen Websites (z. B. einer Seite zum Herunterladen von Software) automatisch die richtige Version ihrer Software.
So erhalten Sie den Browsertyp
Es stellt sich heraus, dass wir über ein super globales Variablenarray namens $ _SERVER [] auf den Benutzeragenten des Browsers zugreifen können. Mit dem Server-Array können wir viele Informationen abrufen, aber wir wollen den Browser-Agenten:
$ _SERVER ['HTTP_USER_AGENT']
Diese Variable liefert viele Informationen, variiert jedoch von Browser zu Browser. Hier ist mein:
Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10_6_4; de-DE) AppleWebKit / 533.4 (KHTML, wie Gecko) Chrome / 5.0.375.125 Safari / 533.4>
Können Sie feststellen, welchen Browser ich verwende? Safari? Nein, Chrome. Entschuldigung, ich habe dir eine knifflige gegeben! Der Benutzeragent von Chrome ist etwas kompliziert, da er auf Apples WebKit basiert. Nun, da wir diese Variable haben, was machen wir damit??
Der Ablauf
Bevor wir weitergehen, müssen wir darüber nachdenken, was wir genau tun wollen. Wir möchten den Benutzeragenten mithilfe der globalen Variablen oben erkennen, aber was dann? Eine einfache IF-Anweisung, um zu überprüfen, ob der Benutzeragent mit einer Liste von Benutzeragenten übereinstimmt, funktioniert. In diesem Fall können wir den Benutzer einfach auf die mobile Version umleiten.
Reguläre Ausdrücke:
Das Problem mit dem Benutzeragenten ist es so einzigartig für jede Person. Es gibt viele hundert verschiedene Versionen von Browsern, viele verschiedene Betriebssysteme und mehrere Versionen jedes dieser Systeme und Plattformen. Es gibt buchstäblich Tausende von möglichen Kombinationen, die ein Benutzeragent sein könnte. Es wäre einfach ineffizient, nicht inklusiv und unflexibel, wenn wir versuchen würden, Strings auf die alte Art und Weise exakt zusammenzubringen. Stattdessen nutzen wir die intelligente und agile Art und Weise. Wir werden reguläre Ausdrücke verwenden. Wenn Sie sich bei der Erwähnung des Ausdrucks "regulärer Ausdruck" krümmten, ist das in Ordnung. Sie verstehen die Ninja-ähnliche Kraft, die uns reguläre Ausdrücke geben. Dies ist kein Tutorial über reguläre Ausdrücke. Dafür brauchst du eine ganze Serie. Wie dieser von dem großen Jeffrey Way. Glücklicherweise brauchen wir für diese Situation keine komplizierten Dinge, so dass es nicht zu schwierig wird.
preg_match ()
Preg_match () ist eine PHP-Funktion für reguläre Ausdrücke, die nach einem bestimmten Muster wie einem String in einem größeren String sucht. Preg_match ist sehr fähig, aber wir werden uns nur auf die Grundlagen konzentrieren. Das ist alles, worüber Sie sich Sorgen machen müssen:
$ pattern = "Das Muster der kleineren Zeichenfolge, nach dem wir suchen" $ subject = "Der größere Text von Daten, nach dem wir suchen. Dies muss keine Zeichenfolge sein, aber in diesem Fall wird es der Fall sein In diesem Fall ist die Musterzeichenfolge nicht hier, sodass keine Ergebnisse gefunden werden "preg_match (Zeichenfolge $ pattern, Zeichenfolge $ subject)
Das Schöne daran ist, dass es reguläre Ausdrücke verwendet, so dass wir eine Menge Flexibilität haben. Wenn wir nicht nach Groß- und Kleinschreibung suchen wollen, können wir:
Accentsconagua
// Das i hinter dem Trennzeichen erstellt eine Groß- / Kleinschreibung ohne Suche preg_match ("/ iPhone / i", "iPhone ist ein tolles Telefon.") Wenn wir nach ganzen Wortübereinstimmungen suchen möchten, können wir das auch tun:
// Das b im Musterbegrenzer gibt eine Wortgrenze an. Dies verhindert partielle Übereinstimmungen wie "iPhoney" preg_match ("/ \ biPhone \ b / i", "iphone ist ein großartiges Gerät ...") Dies zusammen mit einer IF-Anweisung einfügen
Wir müssen dies nun mit einer IF-Anweisung zusammenstellen, um die Ergebnisse zu überprüfen. Das ist ziemlich einfach:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone / i', $ agent)) echo "Sie verwenden ein iPhone."; Wie Sie sehen, sucht das obige nur nach iPhones. Wenn ein iPhone erkannt wird, führt das Skript die Echo-Anweisung aus.
Suche erweitern
Je umfangreicher wir werden, desto mehr Telefongeräte werden wir abdecken, aber wir erstellen hier wirklich nur eine riesige Wäscheliste für mobile Geräte. Glücklicherweise müssen wir die Funktion nicht wiederholen. Das zeige ich dir als nächstes. Durch einfaches Hinzufügen eines Pipe-Zeichens (d. H. |) Können Sie im Wesentlichen eine OR-Anweisung erstellen:
$ agent = $ _SERVER ['HTTP_USER_AGENT']; if (preg_match ('/ iPhone | Android | Blackberry / i', $ agent)) echo "Sie verwenden ein mobiles Gerät."; Obwohl wir durch die Auflistung dieser drei Geräte eine große Mehrheit der mobilen Browser ausmachen, ist der Rest des geringen verbleibenden Prozentsatzes der mobilen Nutzung auf viele andere Telefone verteilt. Anstatt Hunderte von Handys aufzuführen, werden wir es dabei belassen. Sie werden später in diesem Tutorial sehen, wie wir dieses Problem angehen werden.
Umleiten
Sobald der Browser als mobil erkannt wird, müssen wir auf eine mobile Seite umleiten. Wir können dazu einfach die PHP-Header-Funktion verwenden. Sie müssen lediglich einen Ort angeben. Hier ist das komplette Skript:
Der Exit stellt nur sicher, dass wir vor der Weiterleitung nichts anderes ausführen.
Nachdem Sie nun die Theorie der Browsererkennung und -umleitung kennen, können wir über andere Optionen sprechen. DetectMobileBrowser.com ist eine großartige Ressource. Sie bieten nicht nur einen Web-Service, sondern bieten auch eine Open-Source-Lösung für fast jede Sprache, in der Sie sie benötigen. Das Beste ist jedoch, dass sie sich die Zeit genommen haben, um ein viel größeres Muster von potenziellen Zeichenketten für mobile Browser zu erstellen durch. Dies macht die Liste viel gründlicher.
Wenn Sie nichts dagegen haben, einen Link zu einem Drittanbieter zu haben, ist die Verwendung des einfachen Webservices eine großartige Lösung. Sie können Benutzer auf den einfach zu generierenden Link verweisen, und die Website sendet sie an eine andere URL, je nachdem, ob es sich um einen mobilen Browser handelt oder nicht. Der Aufbau ist sehr einfach. http://detectmobilebrowser.com/desktopulr|mobileurl
Wenn Sie keinen Drittanbieter-Link verwenden möchten, können Sie ein Skript in Ihrer bevorzugten Sprache herunterladen, indem Sie auf klicken Skripte herunterladen. Daraufhin werden 10 verschiedene Optionen angezeigt. Wenn Sie sich die Quelle ansehen, werden Sie feststellen, dass diese Liste definitiv so umfassend ist, wie sie ist, und eine sehr ähnliche Methode ist wie unsere. Von dort können Sie es auf Ihrem eigenen Server oder Standort implementieren.
Implementieren Sie es nach dem Download auf Ihrem Server so, als würden Sie es tun. Das einzige, was Sie ändern müssen, ist die Weiterleitungs-URL:
Nachdem wir uns mit der Erkennung mobiler Browser, der Theorie dahinter und einigen gängigen Lösungen befasst haben, sollten Sie gut gerüstet sein, um ein ähnliches System in Ihren eigenen Projekten zu implementieren! Ich hoffe, Sie fanden dieses Tutorial informativ und nützlich und lassen Sie mich wissen, wenn Sie Fragen oder Anmerkungen zu den Kommentaren haben!
