Gösta Thomas' Blog

Wie testet man ohne Smartphone oder andere mobile Endgeräte auf dem Bildschirm seines Desktop-PC, ob selbst entwickelte Webseiten auf mobilen Geräten nutzerfreundlich angezeigt werden? Zum Beispiel: Sind alle Texte ohne waagerechtes Geschiebe sichtbar? Werden Bilder auf eine anzeigbare Größe verkleinert? Lassen sich die Unterseiten über eine intuitive und leicht bedienbare Navigation aufrufen? ...

Nicht jeder, der Webseiten erstellt, hat ein Smartphone oder ein Tablet (ich habe keins von beiden, nicht mal ein einfaches Mobiltelefon). Wer dennoch seine Webseiten fast so wie auf mobilen Endgeräten testen will, kann die eingebauten Entwicklerwerkzeuge der Desktop-Browser Firefox oder Google Chrome nutzen (hierfür ist keine Installation von Browser-Erweiterungen erforderlich).

Firefox: Bildschirmgrößen testen:

So geht's mit den Firefox-Entwicklerwerkzeugen:

1. Entwicklerwerkzeuge mit Taste F12 aufrufen
2. in der Werkzeugleiste auf das mittlere (4.) Symbol klicken: Bildschirmgrößen testen
3. über das Aufklappmenü (kleines weißes Dreieck) gewünschte Bildschirmgröße auswählen (einige verbreitete Bildschirmgrößen sind schon festgelegt)

Vorteile der Firefox-Lösung gegenüber Chrome:

1. Funktion ist mit weniger Arbeitsschritten aufrufbar und leichter bedienbar (so sehe ich das persönlich, aber ich gebe zu: Chrome ist mir eh' nicht ganz geheuer ;-))
2. es können benutzerdefinierte Bildschirmgrößen definiert und gespeichert werden
3. die gewählte Auflösung kann gedreht werden (Portrait <-> Landschaft)

Google Chrome: Bildschirmgrößen-Emulation:

So geht's mit den Chrome-Entwicklerwerkzeugen:

1. Entwicklerwerkzeuge mit Taste F12 aufrufen
2. oben rechts auf das 2. Symbol klicken: Show drawer (Winkel und 3 Striche)
3. in der Leiste unten den Reiter Emulation auswählen
4. im Auswahlfeld Device das Endgerät auswählen (recht große Auswahl)
5. Schaltfläche Emulate aktivieren

Vorteile der Chrome-Lösung gegenüber Firefox:

1. standardmäßig viel größere Auswahl an Endgeräten verfügbar
2. vielfältigere Einstellungsmöglichkeiten vorhanden

Bildschirmgrößen testen auf dem heimischen Server:

Wichtig: Die Funktionen Bildschirmgrößen testen (Firefox-Entwicklerwerkzeuge) und Emulation (Chrome-Entwicklerwerkzeuge) laufen auch ohne Netzverbindung. Man kann also seine Seiten vorab auf dem heimischen Server (zB Xampp) testen, ohne sie ins Netz hochgeladen zu haben. Dieser Test funktioniert sogar im file-Protokoll, also ganz ohne Server. Vergessen Sie beim Testen nicht die Google-Mobile-Bot-Auflösung 320 * 480 (entspricht dem Apple iPhone 3GS).

Andere Browser: Smartphone-Webseiten-Test:

Der Vollständigkeit halber: Mein Lieblingsbrowser, der klassische Opera (bis Version 12), bietet leider keine vergleichbare Testmöglichkeit. Den Safari-Browser habe ich bei mir nicht installiert. Zu neueren Internet Explorern kann ich nichts sagen, da sie mir von Microsoft nicht vergönnt sind (bin Windows-XP-Nutzer).

Im IE Version 8 kann man sich auf folgende Weise behelfen: 1.) Entwicklertools mit Taste F12 aufrufen 2.) aus dem Menü Extras Größe ändern -> Benutzerdefiniert ... auswählen 3.) im Fenster Browsergröße ändern die gewünschte Auflösung eintragen und Hinzufügen 4.) im gleichen Fenster Größe ändern aktivieren. Eine recht primitive Lösung, und wer hier etwa die Auflösung 320 * 480 einträgt, muß sich darauf gefaßt machen, daß alle aktivierten Browserleisten und die Bildlaufleiste darin enthalten sind. Wer seine Seite im Format 320 * 480 sehen will, muß im IE8 etwa 355 * 620 eintragen ;-)

Aktualisierung am 14.07.2015:

Zum Firefox: Noch schneller läßt sich der Firefox-Bildschirmgrößentest über die Tastenkombination Strg+Umschalt+M aufrufen (ersetzt die oben erwähnten Schritte 1. und 2.).

Zu Google Chrome: Wer den Google-Browser nicht mag, kann auch den neuen Browser Vivaldi verwenden. Vivaldi enthält die gleichen Entwicklerwerkzeuge aus dem Chromium-Baukasten (quelloffene Software). Hier finden Sie meinen Vivaldi Browser Test-Artikel.

Aktualisierung am 15.05.2016:

1.
Googlebot mobile kommt seit März 2016 mit der Auflösung 375 * 667 px.

2.
In neueren Versionen von Google Chrome (und anderen Browsern, die als Unterbau das Chromium-Projekt verwenden) wurde der Aufruf des Bildschirmgrößentests inzwischen stark vereinfacht: (a) Nach Aufruf der Entwicklerwerkzeuge mit Taste F12 oder der Tastenkombination Strg+Umschalt+I wechselt man die Darstellung (b) durch Klick auf das zweite Menüleisten-Symbol (zwei Rechtecke) oder die Tastenkombination Strg+Umschalt+M.

3.
Vivaldi Browser: in der (Final) Version 1.0 fehlte der emulation tab zum Bildschirmgrößentest plötzlich, obwohl er in früheren Technical Preview- und Beta-Versionen schon vorhanden war.

Aktualisierung am 11.06.2017:

Googlebot mobile kommt seit Herbst 2016 mit der Auflösung 412 * 732 px.

veröffentlicht in kat_Webdesign