Von den meisten Webseiten gibt es zwei Varianten: eine Desktop- und eine Mobilversion. Der Webserver erkennt automatisch, auf welchem Gerät man surft und liefert entweder die große Desktop-Version oder die für Smartphones und Tablets optimierte Variante der Webseite aus. Wer’s selber ausprobieren möchte, braucht dazu noch nicht einmal die Geräte wechseln. In Chrome gibt es eine versteckte Emulatorfunktion, mit der man jedes Smartphone, Tablet und andere Mobilgerät simulieren kann.
Smartphones und Tablets emulieren und die Mobilversionen anzeigen
Wer schon immer mal wissen wollte, wie eine Webseite auf einem iPhone oder Android-Handys aussieht, aber nicht gleich zu den verschiedenen Geräten greifen möchte (wer hat auch schon alle Smartphone-Versionen zu Hause rumliegen), nutzt einfach den Emulator in Google Chrome. Damit lassen sich alle gängigen Smartphones und Tablets simulieren. So funktioniert’s:
1. Rufen Sie in Google Chrome die gewünschte Webseite auf, die Sie gerne mal in der Mobilversion sehen möchten.
2. Dann öffnen Sie die Entwickerkonsole, indem Sie aus dem Menü oben rechts den Befehl Tools | Entwickertools aufrufen oder die Tase [F12] oder die Tastenkombination [Strg][Shift][I] (auf dem Mac [cmd][shift][i]) drücken.
3. Am unteren Fensterrand erscheinen die Entwicklertools. Drücken Sie einmal die [Esc]-Taste, um die erweiterte Ansicht zu aktivieren und einen weiteren Bereich einzublenden.
4. Hier können Sie im Bereich Emulation alle möglichen Endgeräte simulieren. Wählen Sie zunächst aus der Liste Device das gewünschte Gerät aus, etwa dasSamsung Galaxy S4. Unterstützt werden alle gängigen Mobilgeräte und Android-Versionen, darunter:
- Amazon Kindle
- Apple iPad 1 / 2 / 3 / 4 iPad Mini
- Apple iPhone 3GS / 4 / 4S / 5 / 5S
- Blackberry PlayBook / Z10 /Z30
- Google Nexus S / 4 / 5 / 7.2 / 7 / 10
- HTC Evo / Touch HD / Desire HD / Desire
- HTC One X /EVO LTE
- HTC Sensation / EVO 3D
- LG Optiumus G / LTE / 2X / 3D / One / 4X HD / Black
- Motorola Defy / Droid / Droid 3 / Droid 4 / Droid Razr / Droid Razr HD / Atrix 4G / Atrix 2 / Droid X / Milestone
- Motorola Xoom / Xyboard
- Nokia C5 / C6 / C7 / N97 / N8 / X7
- Nokia Lumia 7X0 / 8XX / 900 / N800 / N810 / N900
- Samsung Galaxy S / S II / S III / Galaxy Nexus / W / S4 / S5
- Samsung Galaxy Tab 7.7 / 8.9 / 10.1
- Sony Xperia S / Ion / Sola / U / Z / Z1
Mit jeder neuen Chrome-Version wird auch die Liste der unterstützten Mobilgeräte erweitert. Das ist auch gut so, da fast jede Woche neue Geräte und Geräteversionen auf den Markt kommen.
5. Nach einem Klick auf Emulate stellt Chrome die Webseite so dar, wie sie auf dem gewählten Gerät aussehen würde. Sollte es nicht auf Anhieb klappen, drücken Sie die [F5]-Taste, um die Seite zu laden. Selbst die Finger-Navigation wird simuliert. Per Klick auf die simulierte Webseite lässt sich der Fingertipp auf Links und Menüs emulieren.
Per Klick auf Screen können Sie verschiedene Bildschirmgrößen simulieren und prüfen, wie sich die mobile Webseite bei verschiedenen Displaygrößen verhält.
Im Bereich User Agent lässt sich der User Agent manipulieren. Der User Agent ist praktisch das Erkennungszeichen, mit dem sich der Browser beim Webserver zu erkennen gibt. Hier können Sie neben den mobilen Browserversionen auch verschiedene Desktop-Versionen ausprobieren, etwa alte Opera-, Chrome- oder Firefox-Versionen.
Mit Sensors können Sie die verschiedenen Sensoren eines typtischen Smartphones oder Tablets simulieren. Dazu gehören beispielsweise der Touch-Sensor, der GPS-Sensor oder andere Techniken zur Geo-Lokalisierung oder der Beschleunigungssensor. Selbst Multi-Touch lässt sich simulieren, indem man die [Shift]-Taste gedrückt hält.
Um den Emulationsmodus und die Entwickerkonsole wieder zu verlassen, drücken Sie einfach erneut die Taste [F12] oder klicken oben rechts in der Entwicklerkonsole auf das X. Die Webseite wird dann wieder im normalen Desktopmodus angezeigt.