Wofür Responsive-Test gedacht ist
Responsives Design passt eine Seite an unterschiedliche Bildschirmbreiten an. Dieses Werkzeug lädt eine URL in ein Iframe und lässt Sie die Ansicht auf die gängigen Viewport-Breiten von Handy, Tablet und Desktop stellen.
Bedienung
- Die URL der Seite eingeben
- Auf Laden klicken
- Mit den Schaltflächen die Viewport-Breite umschalten
- Das Layout bei jeder Breite prüfen
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.
Fragen und Antworten
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 ändert 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.
Einschränkungen
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.
Was das Werkzeug kann
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
Wenn Sie die Seite ansehen: