Was Responsive-Test ist
Responsives Design passt eine Seite an unterschiedliche Bildschirmbreiten an. Dieses Werkzeug laedt eine URL in ein Iframe und lässt Sie die Ansicht auf die gängigen Viewport-Breiten von Handy, Tablet und Desktop stellen.
Funktionsumfang
- Vordefinierte Breiten 360 / 768 / 1280 / 1920 px
- Direkte Iframe-Vorschau der echten Seite
- Ein Klick stellt die Ansichtsbreite um
- Ehrlicher Hinweis bei X-Frame-Errors
Typische Anwendungen: Kurz prüfen, ob eine Seite auf Handybreite brauchbar wirkt, Das Layout bei Desktop- und Tablet-Breite vergleichen, Eine eigene Seite vor dem Einsatz schnell ansehen.
Bedienung
- Die URL der Seite eingeben
- Auf Laden klicken
- Mit den Schaltflaechen die Viewport-Breite umschalten
- Das Layout bei jeder Breite prüfen
Unterstützte Fälle
Viele Websites senden Header wie X-Frame-Options oder eine CSP-Regel, die das Einbetten in fremde Iframes verbieten. Dann lässt sich die Vorschau hier nicht zeigen – das ist eine serverseitige Einstellung. In dem Fall ist der Geräteemulator der Browser-Entwicklerwerkzeuge die bessere Wahl.
Nachgefragt
Warum bleibt das Iframe leer oder zeigt einen Fehler?Die Seite sendet wahrscheinlich X-Frame-Options oder eine Content-Security-Policy, die das Einbetten verbietet. Das ist gewollt und lässt sich von diesem Werkzeug nicht umgehen.
Ist das dasselbe wie der Geräteemulator im Browser?Nah dran, aber nicht ganz. Der Emulator setzt zusätzlich Pixelverhältnis und User-Agent eines Geräts. Dieses Werkzeug aendert nur die Breite des Ansichtsfensters.
Welche Breiten sind vordefiniert?360 Pixel für ein schmales Handy, 768 für ein Tablet, 1280 für einen normalen Desktop und 1920 für einen großen Monitor. Das deckt die meisten Grenzfälle ab.
Kann ich auch eine lokale Datei prüfen?Nein, das Iframe braucht eine aufrufbare http- oder https-URL. Lokale Dateien und lokale Entwickler-URLs lassen sich nicht einbetten.
Verwandte Werkzeuge
Diese Werkzeuge passen zum Responsive-Test: