Responsive-Breakpoint-Tester
Website in mehreren Viewport-Größen parallel ansehen: Breakpoints wählen, URL eingeben und Layouts vergleichen.
Der Responsive-Breakpoint-Tester zeigt eine Website in mehreren Viewport-Größen nebeneinander. Du gibst eine Adresse ein, wählst Geräte wie Smartphone, Tablet, Laptop und Desktop oder eigene Größen und vergleichst die Layouts parallel, inklusive Hinweis auf den passenden Tailwind-Breakpoint. Die Seite wird direkt von deinem Browser geladen, es läuft nichts über unseren Server.
Gib eine Adresse ein, um die Rahmen zu sehen. Am besten funktioniert das mit deiner eigenen Seite oder einer lokalen Entwicklungsadresse.
Layouts bei verschiedenen Breiten prüfen
Responsive Design bedeutet, dass sich eine Seite an die Breite des Fensters anpasst. Der Tester öffnet deine Seite in mehreren Rahmen mit festen Breiten, sodass du alle Layouts gleichzeitig siehst und Umbrüche sofort erkennst. Für die Größen eignen sich die üblichen Breakpoints.
Übliche Breakpoints
| Tailwind | Ab Breite | Typisches Gerät |
|---|---|---|
| Basis | 0 px | Smartphone |
| sm | 640 px | Großes Smartphone quer |
| md | 768 px | Tablet hochkant |
| lg | 1024 px | Tablet quer, kleiner Laptop |
| xl | 1280 px | Laptop, Desktop |
| 2xl | 1536 px | Großer Desktop |
So gehst du vor
- Adresse laden und Größen wählen.
- Auf Umbrüche, abgeschnittene Texte und zu kleine Bedienelemente achten. Letztere prüfst du mit dem Touch-Target-Prüfer.
- Breakpoints im Tailwind-Config-Generator anpassen und Viewport-Werte im Viewport-Einheiten-Rechner umrechnen.
Beispiel
Ein Menü bricht bei 900 px um. Du stellst einen Rahmen auf diese Breite, siehst den Bruch und legst den Breakpoint für das Mobilmenü ab 1024 px fest. Fließende Größen dazwischen liefert der clamp()-Rechner.
Häufige Fragen
Warum wird meine Seite nicht angezeigt?
Viele Websites verbieten das Einbetten in fremde Seiten über die Header X-Frame-Options oder Content-Security-Policy (frame-ancestors). Der Browser blockiert die Darstellung dann, das Tool kann das nicht umgehen. Für deine eigene Seite erlaubst du das Einbetten testweise, für fremde Seiten nutzt du die Entwicklerwerkzeuge des Browsers.
Werden Media Queries wirklich ausgewertet?
Ja. Jeder Rahmen ist ein eigenes Browserfenster in der gewählten Größe, deshalb greifen Media Queries und Container Queries wie in einem echten Fenster dieser Breite. Die Skalierung ändert nur die Darstellung des Rahmens, nicht die Viewport-Größe.
Werden meine Eingaben gespeichert oder übertragen?
Nein. Die Adresse bleibt in deinem Browser, es gibt keinen Server-Abruf durch machsklar.de. Die Seite wird direkt von deinem Browser geladen, so als würdest du sie in einem Tab öffnen.
Ersetzt das echte Geräte-Tests?
Nein. Der Tester zeigt Breiten und Layoutverhalten, aber keine echte Touch-Bedienung, keine Betriebssystem-Eigenheiten und keine Browserleisten. Ergänze ihn durch Tests auf echten Geräten.
Wie finde ich den richtigen Breakpoint?
Ziehe die Breite an, bis das Layout bricht, und lege den Breakpoint an diese Stelle. Der Hinweis unter jedem Rahmen zeigt, welcher Tailwind-Breakpoint (sm ab 640, md ab 768, lg ab 1024, xl ab 1280, 2xl ab 1536 Pixel) bei dieser Breite aktiv ist.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.