Mobile Version einer Website in Chrome ansehen

Zu testen, wie eine Seite auf dem Smartphone aussieht, sollte nicht bedeuten, zehn Geräte besitzen zu müssen. Diese Anleitung erklärt, wie Sie die mobile Version von Website-Seiten direkt im Browser ansehen – mit der mobilen Ansicht, die Chrome bereits enthält, sowie einer kostenlosen Erweiterung, die einem echten Smartphone deutlich näherkommt.

Warum die mobile Ansicht prüfen

Mehr als die Hälfte des gesamten Web-Traffics ist mobil, doch Layouts, die auf einem Laptop perfekt aussehen, brechen auf kleineren Bildschirmen oft: Text läuft über, Buttons überlappen, Bilder werden verzerrt. Zu wissen, wie man die mobile Version einer Website vor den Besuchern ansieht, verhindert schlechte erste Eindrücke und verlorene Conversions. Es hilft auch dem SEO, da Suchmaschinen Seiten danach bewerten, wie gut sie mobil funktionieren.

Methode 1: Gerätemodus der Chrome DevTools

Die schnellste mobile Ansicht in Chrome bietet der Gerätemodus der DevTools. So öffnen Sie ihn:

1. Öffnen Sie die Website in Chrome.
2. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie Untersuchen (oder drücken Sie F12).
3. Klicken Sie auf das Symbol der Geräteleiste oder drücken Sie Ctrl+Shift+M.
4. Wählen Sie oben im Dropdown-Menü eine Bildschirmgröße.
5. Laden Sie die Seite neu, damit sie mit dem mobilen User-Agent geladen wird.

Das ist schnell und kostenlos, hat aber echte Grenzen:

• Es zeigt nur den Viewport – ohne Geräterahmen, Statusleiste oder realistische Browseroberfläche.
• Es bildet Safari unter iOS oder eine bestimmte Android-Version nicht vollständig nach.
• Mehrere Geräte nebeneinander zu vergleichen ist umständlich.
• Die Oberfläche ist für Entwickler gedacht, nicht für Designer oder QA-Teams.

Methode 2: Phone Simulator für eine realistische Geräteansicht

Für eine Vorschau, die wirklich wie ein Smartphone aussieht, eignen sich Erweiterungen wie Phone Simulator am besten. Sie rendert den aktuellen Tab in einem echten Geräterahmen – mit korrektem Viewport, User-Agent und Systemdarstellung.

Damit können Sie:

• Aus über 40 Geräten wählen: iPhone, Samsung Galaxy, Pixel, iPad, Laptops und mehr.
• Zwischen Hoch- und Querformat sowie hellem und dunklem Thema wechseln.
• Zwei Geräte gleichzeitig ansehen (bis zu 8 mit PRO) mit synchronem Scrollen.
• Screenshots erstellen und den Bildschirm aufnehmen, um sie mit dem Team zu teilen.
• Ein individuelles Gerät mit beliebiger Größe, System, Farbe und User-Agent erstellen.

So starten Sie:

1. Installieren Sie Phone Simulator aus dem Chrome Web Store.
2. Öffnen Sie die Website, die Sie prüfen möchten, und klicken Sie auf die Erweiterung.
3. Wählen Sie ein Gerät – die Seite lädt sofort in einem realistischen Rahmen.
4. Wechseln Sie Gerät oder Ausrichtung, um jedes Layout zu sehen.

All das funktioniert im kostenlosen Tarif, sodass Sie Ihre Website mobil testen können, ohne etwas zu bezahlen.

Wann die realistische Ansicht wirklich hilft

Ein einfacher Viewport reicht für eine schnelle Breitenprüfung, doch manche Aufgaben brauchen das ganze Bild:

• Einem Kunden eine mobile Ansicht der Website zeigen, die er sofort als Smartphone erkennt.
• Prüfen, wie ein fixierter Header unter einem Notch oder der Statusleiste sitzt.
• Den Dunkelmodus auf einem bestimmten Gerät überprüfen.
• Saubere Screenshots für ein Pitch, einen Store-Eintrag oder die Dokumentation aufnehmen.

Welche Methode Sie wählen sollten

Wenn Sie beim Programmieren nur eine schnelle Pixelprüfung brauchen, reicht die mobile Ansicht der Chrome DevTools. Wenn Sie die Website als mobil so sehen möchten, wie echte Nutzer sie sehen, Geräte vergleichen oder Screenshots aufnehmen wollen, ist Phone Simulator die bessere Wahl. Wer beide Wege beherrscht, hat immer das passende Werkzeug für die jeweilige Aufgabe.