Responsiver Betrachter zeigt die aktuelle Webseite nebeneinander in mehreren Geräte-Viewport-Größen gerendert — alles auf einem Bildschirm. Sehen Sie gleichzeitig, wie Ihr Design auf iPhone, iPad, Android-Telefonen, Laptops und Desktops aussieht. Scrollen Sie einen Viewport und alle anderen folgen, sodass es einfach ist, denselben Inhaltsabschnitt über alle Gerätegrößen zu vergleichen.
Das Testen responsiver Designs bedeutet traditionell, das Browserfenster zu verkleinern oder die Geräte-Toolbar der DevTools zu verwenden, um zwischen Viewport-Größen einzeln zu wechseln. Das funktioniert, aber man kann immer nur eine Größe sehen — was es unmöglich macht, gleichzeitig zu vergleichen, wie ein Abschnitt auf Mobilgerät vs. Desktop aussieht. Responsiver Betrachter löst dies, indem die Seite gleichzeitig in mehreren Viewports gerendert wird, die nebeneinander auf Ihrem Bildschirm angezeigt werden. Wählen Sie aus voreingestellten Geräteprofilen (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) oder geben Sie benutzerdefinierte Abmessungen ein. Jeder Viewport ist eine vollständig gerenderte Instanz der Seite, kein statischer Screenshot — scrollen Sie einen und alle anderen scrollen zur gleichen Position. Dieses synchronisierte Scrollen lässt Sie den exakt gleichen Inhaltsbereich über alle Gerätegrößen auf einen Blick vergleichen. Es ist der schnellste Weg, responsive Probleme zu entdecken: Navigation, die falsch umbricht, Bilder, die aus ihren Containern herauslaufen, Text, der auf kleinen Bildschirmen unleserlich wird, oder Abstände, die unschön kollabieren.
Sehen Sie die aktuelle Seite gleichzeitig in mehreren Viewport-Größen nebeneinander auf Ihrem Bildschirm gerendert. Vergleichen Sie Mobile-, Tablet- und Desktop-Layouts auf einen Blick ohne zwischen Ansichten zu wechseln. Jeder Viewport ist ein voll funktionsfähiges Rendering der Seite.
Wählen Sie aus einer Bibliothek beliebter Gerätevoreinstellungen: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) und Full HD Desktop (1920×1080). Voreinstellungen werden mit aktuellen Geräteabmessungen aktualisiert.
Geben Sie eine beliebige benutzerdefinierte Breite und Höhe ein, um nicht-standardmäßige Viewport-Größen zu testen. Müssen Sie überprüfen, wie die Seite bei genau 768px Breite aussieht (der übliche Tablet-Breakpoint)? Einfach eintippen. Mehrere benutzerdefinierte Viewports können neben Voreinstellungen hinzugefügt werden.
Scrollen Sie einen Viewport und alle anderen scrollen zur gleichen vertikalen Position. Dies lässt Sie den exakt gleichen Inhaltsabschnitt über alle Gerätegrößen gleichzeitig vergleichen — sehen Sie, wie der Hero-Bereich, die Preistabelle oder der Footer auf Mobile, Tablet und Desktop gerendert werden.
Jeder Viewport wird innerhalb eines realistischen Geräterahmens angezeigt — Telefon-Ränder, Tablet-Grenzen, Laptop-Chrome. Der visuelle Kontext hilft Stakeholdern zu verstehen, welcher Viewport welches Gerät darstellt, während Reviews und Präsentationen.
Schalten Sie einzelne Geräte ein und aus, um sich auf spezifische Größenvergleiche zu konzentrieren. Nur Mobile und Desktop vergleichen? Wählen Sie die Tablet-Voreinstellungen ab. Nur iPhones anzeigen? Alles andere abwählen. Vollständige Kontrolle darüber, welche Viewports sichtbar sind.
Verwenden Sie nach der Implementierung eines responsiven Designs den Responsiven Betrachter, um zu überprüfen, ob jeder Abschnitt über alle Zielgerätegrößen korrekt aussieht. Erkennen Sie Textüberlauf, Bildskaliprobleme, Navigationskollaps-Probleme und Abstandsinkonsistenzen — alles in einer Ansicht.
Zeigen Sie Kunden während eines Review-Meetings, wie ihre Website auf verschiedenen Geräten aussieht. Die Nebeneinander-Ansicht ist sofort intuitiv — kein Erklären von Viewport-Konzepten nötig. Kunden können Mobile, Tablet und Desktop gleichzeitig sehen.
Sehen Sie ein Layout-Problem bei einer bestimmten Breite? Fügen Sie einen benutzerdefinierten Viewport bei der genauen Pixelbreite hinzu, bei der das Problem auftritt, und vergleichen Sie es mit etwas breiteren und schmaleren Viewports, um zu identifizieren, welcher CSS-Breakpoint das Problem verursacht.
Überprüfen Sie, ob lange Überschriften auf Mobile korrekt umbrechen, ob Datentabellen auf kleinen Bildschirmen scrollbar werden, ob Formulareingaben groß genug zum Antippen sind und ob CTAs auf allen Gerätegrößen sichtbar und zugänglich bleiben.
Verwenden Sie die Multi-Geräte-Ansicht, um überzeugende responsive Design-Showcase-Bilder zu erstellen. Machen Sie einen Screenshot des Responsiven Betrachters, der Ihr Design über 3-4 Gerätegrößen für Portfolio-Präsentationen zeigt.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol des Responsiven Betrachters. Die Seite wechselt in den Multi-Viewport-Modus mit nebeneinander angezeigten Geräterahmen.
Die Geräteleiste oben zeigt verfügbare Voreinstellungen (iPhone, iPad, Pixel, MacBook, Desktop). Klicken Sie auf Geräte, um sie ein-/auszuschalten. Ausgewählte Geräte erscheinen unten als Viewports.
Klicken Sie auf die Schaltfläche Benutzerdefiniert und geben Sie spezifische Breite × Höhe Abmessungen ein, um einen benutzerdefinierten Viewport hinzuzufügen. Nützlich zum Testen genauer Breakpoint-Werte wie 768px, 1024px oder 1280px.
Scrollen Sie einen beliebigen Viewport — alle anderen folgen zur gleichen Position. Vergleichen Sie, wie derselbe Abschnitt über alle ausgewählten Gerätegrößen gleichzeitig aussieht.
Klicken Sie erneut auf das Symbol des Responsiven Betrachters oder auf die Schließen-Schaltfläche, um den Multi-Viewport-Modus zu beenden und zur normalen Einzelseiten-Ansicht zurückzukehren.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
