Kostenloser Responsive Design Tester: Mobile, Tablet- und Desktop-Viewports prüfen

Gib eine URL ein, wähle einen CSS-Viewport aus der Liste oder eine benutzerdefinierte Breite und Höhe und prüfe die Seite in einem iframe. Das Tool prüft das Layout bei den ausgewählten Größen, emuliert aber kein physisches Gerät.

Einige Websites blockieren das Laden in iframes mit Sicherheits-Headern wie X-Frame-Options oder Content-Security-Policy. Bei einem schmalen Browserfenster kann der sichtbare Vorschaubereich zusätzlich begrenzt sein.

Gerätevorgaben

Benutzerdefinierte Größe

Aktuelle Größe:

Checkliste für Responsive-Tests

Nutze diese kurze Checkliste nach jeder Viewport-Änderung. Sie hilft dir, Layoutprobleme zu finden, ohne eine einzelne Vorschaugröße als Beweis für jedes Gerät zu behandeln.

  1. Lade eine Seite mit echten Inhalten und prüfe, ob Kopfbereich, Hauptinhalt und wichtigste Aktion sichtbar sind.
  2. Teste ein schmales und ein größeres Handy, ein Tablet, eine Desktop-Breite sowie einen Fall im Querformat oder mit geringer Höhe.
  3. Teste knapp unter und über jedem inhaltsbezogenen CSS-Breakpoint und vergleiche anschließend die Layoutänderung.
  4. Prüfe auf horizontales Überlaufen, abgeschnittenen Text, unbrauchbare Navigation, Formularprobleme und Medien, die nicht skalieren.
  5. Prüfe Touch, browserspezifisches Verhalten, Zoom und gedrosseltes Netzwerk zusätzlich in einem echten Browser oder Gerätelabor.
  6. Notiere Viewport-Größe, Browser und Ergebnis, damit eine spätere Korrektur reproduzierbar bleibt.

Für einen längeren Debugging-Ablauf lies die Checkliste zum Responsive-Debugging und die Viewport-Grundlagen.

Responsive Design Tipps

Was dieser Tester anzeigen kann und was nicht

Dieses Tool ändert die CSS-Breite und -Höhe des iframes, damit du Layoutänderungen bei ausgewählten Viewport-Größen prüfen kannst. Es bildet weder die Geräte-Pixeldichte, Touch-Eingaben, Browseroberfläche, den User-Agent noch Netzwerkbedingungen eines physischen Geräts nach. Prüfe Touch- und gerätespezifisches Verhalten auf echter Hardware oder in einer speziellen Geräte-Testumgebung.

Zu testende Viewport-Breiten

  • Beispiele für kleine CSS-Viewports: 320px, 360px, 375px, 390px, 428px
  • Beispiele für Tablet-CSS-Viewports: 768px, 820px, 834px, 1024px
  • Beispiele für Desktop-CSS-Viewports: 1280px, 1366px, 1440px
  • Beispiele für breite CSS-Viewports: 1536px und mehr

Test-Tipps

  • Teste mit echten Inhalten statt Platzhaltern, um sicherzustellen, dass Layouts verschiedene Inhaltslängen handhaben
  • Prüfe, dass Navigationsmenüs auf kleinen Bildschirmen nutzbar sind
  • Stelle sicher, dass Formularelemente auf allen Geräten nutzbar und einfach auszufüllen sind
  • Bestätige Touch-Interaktionen auf einem echten Touchgerät; diese Vorschau stellt keine Touch-Eingabe bereit
  • Prüfe, dass Bilder und Medien korrekt skalieren
  • Nutze die Entwicklertools des Browsers für Netzwerk-Drosselung, wenn du das Ladeverhalten testen musst; diese Vorschau emuliert keine Netzwerkbedingungen
  • Überprüfe die Lesbarkeit der Schrift, indem du sicherstellst, dass Textgröße und Zeilenhöhe auch auf kleinsten mobilen Bildschirmen lesbar bleiben
  • Teste knapp unter und über jedem inhaltsbezogenen Breakpoint, um die erwartete Layoutänderung zu bestätigen

Häufig gestellte Fragen

Warum können manche Websites nicht im Tester geladen werden?

Viele Websites setzen aus Sicherheitsgründen X-Frame-Options oder Content-Security-Policy Header, die verhindern, dass sie in iframes geladen werden. Dies ist eine Sicherheitsmaßnahme zum Schutz vor Clickjacking und anderen Angriffen. Für diese Websites musst du möglicherweise Browser-Entwicklertools oder andere Testmethoden verwenden.

Wie unterscheidet sich die Website im Tester von echten Geräten?

Dieser Tester zeigt hauptsächlich CSS-Viewport-Größen in einer Vorschau und kann nicht alle Eigenschaften echter Geräte nachbilden, etwa Touch-Interaktionen, Geräte-Pixeldichte oder bestimmtes Browserverhalten. Prüfe das Design für die finale Abnahme auf echten Geräten.

Wie kann ich spezifische Media Query Breakpoints testen?

Verwende die benutzerdefinierte Größenfunktion, um deine Media Query Breakpoint-Werte einzugeben. Wenn du beispielsweise einen Breakpoint bei 768px Breite hast, kannst du 767px und 768px eingeben, um Layouts auf beiden Seiten des Breakpoints zu testen.

Verwandte Ressourcen