Wechseln zu: Navigation, Inhalt, Suche

Permalink

0

HowTo: Testumgebung für Mobile Browser aufsetzen

Seit Apple der Internetnutzung auf Smartphones 2007 mit der Markteinführung des iPhones zum Durchbruch verholfen hat, hat sich auf dem Endgerätemarkt sehr viel getan und immer mehr Menschen verwenden mobile Endgeräte zum Surfen. Neben dem iPhone gibt es mittlerweile Android, webOS und viele mehr, sodass sich die Entwicklung von Applikationen für jedes mobile Betriebssystem viel zu aufwändig wäre. Stattdessen macht es mehr Sinn, speziell auf mobile Geräte optimierte Versionen von Webseiten anzubieten, die die kleine Bildschirmgröße der Smartphones effektiv und sinnvoll nutzen.

Mobile Browser: WPtouch

Unter WordPress gibt es hierfür ein Plug-in, doch für andere Webseiten ist es sinnvoll, sich eine Testumgebung für mobile Webseiten einzurichten, die lokal, wie diese iPad-Browser-Simulation, läuft.

Google Chrome bzw. Chromium bietet sich dabei als Browser an, da er, wie viele mobile Browser (iPhone, Android und webOS), WebKit verwendet. Die portable Version von Google Chrome, die man hier herunterladen kann, erweist sich dabei als vorteilhaft, weil man sie schnell auf den aktuellsten Chromium Build aktualisieren kann und beim Testen nicht die lokale Installation verändert.

Chrome Updater

Nachdem man über die Updater.exe den aktuellsten Chromium Build installiert hat, öffnet man Chromium und installiert die Erweiterung: Window Resizer.

Google Chrome-Erweiterung: Window Resizer

Diese skaliert das Browserfenster mit einem Klick auf die größe eines Touchscreens.

Portable Google Chrome

Um dem Webserver nun vorzutäuschen, dass es sich um ein Smartphone handelt, muss man den User-Agent anpassen. Dies kann man bei Chrome relativ leicht über einen Command Line Switch machen. Diesen trägt man entweder in der Verknüpfung zur Anwendung ein, startet über die Kommandozeile oder fügt ihn in der portablen Version einfach in der Datei parameter.txt hinzu.

Zum Testen hier die User-Agents von einiger verbreiteter Smartphones:

Apple iPad

Apple iPhone

Apple iPod Touch

Google Nexus One

HTC Desire

HTC Hero

Weitere User-Agents kann man bei DeviceAtlas oder in der Liste der User-Agents nachschauen. Standardmäßig lautet der User-Agent von Chromium (about:version) bzw. Minefield unter Windows:

Chromium 6.0.451.0

Minefield 3.7a6pre

Google Chrome: Normal

Um den User Agent vom Nexus One zu verwenden, fügt man zum Beispiel folgende Command Line Flag in der parameter.txt hinzu.

Google Chrome: Mobil

Etwas ähnliches ließe sich unter Firefox wahrscheinlich mit den Add-ons User Agent Switcher und Firesizer auch einrichten. Dies habe ich allerdings noch nicht getestet.

Mobile Browser: Facebook Touch

Eine Testumgebung für mobile Webseiten einzurichten, macht nicht nur Sinn, wenn man Webseiten speziell auf mobile Geräte optimierten möchte. Sie hilft auch dabei einen Überblick darüber zu bekommen, welche Webseiten schon eine optimierte Version anbieten oder kann das Erstellen von Screenshots erheblich vereinfachen.

Links

  • Kurz-URL

Kategorien Android, Berichte, Browser, Chrome, Firefox, HowTo, Mobil, Mozilla, Open-Source, Smartphone Schlagwörter , , , , , , , , , , , , , , , , , , ,

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.