CJW Network Home

Mobile Browser-Erkennung - ein lächerlicher einfacher Ansatz

Mittwoch, 28. März 2012: Donat Fritschy

Mobile Browser-Erkennung

Ist "Browser Sniffing" die einzige Möglichkeit, um ein mobiles Gerät zu detektieren?

Wenn es um die Entwicklung für das Web geht, scheint sich die Geschichte zu wiederholen. Vor nicht langer Zeit waren Seufzer der Erleichterung zu hören, als - endlich! - Internet Explorer, Firefox, Safari und Opera eine mehr oder weniger einheitliche und vorhersehbare Umgebung boten. Die dunklen Zeiten von inkompatiblen Browsern schienen vorbei zu sein.
 
Aber die Freude dauerte nicht lange. Mit der Verbreitung von mobilen Geräten sind wir wieder im Mittelalter gelandet - Browser-Sniffing scheint der einzige Weg zu sein, um zu entscheiden, ob unsere Website auf einem mobilen Gerät ausgeführt wird. Eine aktive Community auf http://detectmobilebrowsers.com/ versucht, die tägliche längere Liste von Geräten in sorgfältige komponierte reguläre Ausdrücke zu überführen, die aber unweigerlich im Moment, wo sie herunterladen werden, obsolet sind. Das gleiche gilt für die eZ Publish-Implementierung, die auf der gleichen Quelle (https://github.com/ezsystems/ezpublish/commit/a695d9d6b5ec3fd346054132863ee9bd2315aa6f) basiert.
 
Gibt es keine Alternative? In langen Jahren der Software-Entwicklung habe ich immer nach einfachen Lösungen getrachtet. Und der Ansatz, den ich für die Erkennung von mobilen Browsern präsentieren möchte, ist wirklich einfach, um nicht zu sagen lächerlich einfach.
 
Sofern Sie nicht auf ein spezifisches Gerät fokussieren, wie zum Beispiel das neue iPad, brauchen Sie sich nicht um Hersteller, Modell oder OS-Versionen zu kümmern. Wahrscheinlich wollen Sie nur wissen: ist dies ein Gerät mit einem kleinen Bildschirm? Einem so kleinen Bildschirm, dass ich besser mobile Inhalte liefern sollte? Die Antwort könnte so einfach sein wie eine einzige Zeile JavaScript-Code in der Desktop-Version Ihrer Website:

if ( screen.width < 768 ) location.replace( mobile url );

Natürlich ist diese Lösung nicht perfekt. Die Entscheidung beruht auf dem Client, was zu einer Verzögerung und dem Laden einer neuen Seite führt. Eine serverseitige Lösung wäre angenehmer, aber leider ist screen.width auf Server-Ebene nicht leicht zugänglich.
 
Und erstaunlicherweise wird die Bildschirmgrösse nicht von allen Clients zuverlässig zurückgegeben, wie James Pearce in seinem ausgezeichneten Beitrag (http://tripleodeon.com/2011/12/first-understand-your-screen/) darlegt. Aber für unsere Zwecke funktioniert screen.size gut genug. Weiter könnten Sie argumentieren, dass der Wert 768 als Breakpoint für die Breite willkürlich ist. Natürlich haben Sie Recht. Ändern Sie es nach Ihrem Ermessen und Bedürfnissen.
 
Und, was machen wir mit Benutzern, die unglücklich sind über unsere Entscheidung, ihnen die mobilen Version anzubieten? Natürlich wollen wir sie glücklich zu machen und bieten in der mobilen Version einen besonderen Link zu der Standard-Website. Dieser Link führt dazu dass ein Cookie gesetzt wird, das die Umschaltung zu der mobilen Version deaktiviert. Der vollständige Code wäre dann:

 
if ( location.search.match( 'notmobile' ) ) $.cookie( 'notmobile', '1', { expires: 1, path: '/' } );
if ( $.cookie( 'notmobile' ) == null && screen.width < 768 ) location.replace( mobile url )

(Hinweis: diese Schnipsel beruht auf der jQuery Cookie-Plugin (https://github.com/carhartl/jquery-cookie) Manipulation von Cookies ohne jQuery würde nur noch ein paar Zeilen Code hinzuzufügen.).

Ich hoffe, dieser Blog-Eintrag ist nützlich für Sie, und ich freue mich auf alle Kommentare. Danke fürs Lesen!

Coolscreen.de - internet development, audits and consulting Jac Systeme - software development, support and maintenance Webmanufaktur - alles ausser gewöhnlich eZ Publish Silver Partner