Zur mobilen Ansicht wechseln

Mobile Ansichtsfenstervorschau mit einem Klick für jede Seite.

Moderne Webnutzer sitzen nicht still. Sie wechseln zwischen 27-Zoll-Monitoren im Büro und kleinen Bildschirmen im Zug und erwarten, dass jede Website für beide Nutzer maßgeschneidert wirkt. Designer, Entwickler, Marketingexperten und selbst Poweruser stellen sich täglich die Frage: „Wie sieht diese Seite auf einem echten Smartphone aus?“ Die Chrome-eigenen DevTools beantworten diese Frage – nachdem man sich durch Menüs, Panels und eine Vielzahl von Geräterahmen gekämpft hat. Mit der mobilen Ansicht wird dieser Weg auf einen einzigen Klick oder eine Verknüpfung verkürzt. Tippen Sie auf das Symbol in der Symbolleiste (oder drücken Sie Alt + M), und die aktuelle Seite wird sofort auf ein Ansichtsfenster in Handygröße beschränkt. Ein weicher grauer Hintergrund isoliert die Seite vom Rest des Browserfensters und rückt Ihren Inhalt in den Mittelpunkt. Gleichzeitig werden Sie optisch daran erinnert, dass die mobile Ansicht aktiv ist. Ein kleines Symbol in der Ecke zeigt die aktuelle Gerätevoreinstellung an – beginnend mit dem iPhone 14. Die Erweiterung wird mit drei der am häufigsten nachgefragten Breakpoints ausgeliefert: iPhone 14 (390 × 844 px), Pixel 7 (412 × 915 px) und iPad mini (768 × 1024 px). Jede Vorgabe passt das Meta-Viewport-Tag, die Elementbreiten und das Scrollverhalten an, um das Erscheinungsbild des gewählten Geräts nachzuahmen. Wer profitiert? Front-End-Entwickler können Layout-Regressionen in Sekundenschnelle erkennen, ohne DevTools öffnen zu müssen – ideal beim Jonglieren mit mehreren Zweigen oder Staging-Servern. UI/UX-Designer werden einer schnellen Plausibilitätsprüfung unterzogen, bevor sie neue Figma-Kompositionen an die Entwicklungsabteilung senden. Qualitätssicherungsteams können Tastaturkürzel in automatisierte Test-Suites skripten, um schnellere Reaktionstests zu ermöglichen. Inhaltsersteller und Vermarkter sehen sich Newsletter, Zielseiten und eingebettete soziale Medien in der Vorschau an, um die Lesbarkeit auf kleinen Bildschirmen sicherzustellen. Kundendienstmitarbeiter, die von mobilen Benutzern gemeldete Probleme reproduzieren, benötigen keine physischen Geräte oder Simulatoren mehr. Pädagogen und Studierende, die sich mit Konzepten des Responsive Designs auseinandersetzen, erhalten eine zugängliche, berechtigungssichere Sandbox. Ganz gleich, ob Sie kurz vor dem Start einen Checkout-Flow optimieren oder eine Klasse voller aufstrebender Entwickler unterrichten, diese Erweiterung fügt sich nahezu ohne Lernaufwand in Ihren Arbeitsablauf ein.