Responsive Tester

Viele Websites setzen den HTTP-Header X-Frame-Options oder eine Content-Security-Policy, die das Laden in einem iframe verhindert. Das ist eine Sicherheitsmaßnahme der jeweiligen Website. Leider kann dieses Verhalten nicht umgangen werden. Versuchen Sie es mit einer anderen URL oder testen Sie Ihre eigene Website, bei der Sie diese Einstellung kontrollieren können.

Responsive Webdesign bedeutet, dass sich eine Website automatisch an die Bildschirmgröße des Endgeräts anpasst – ob Smartphone, Tablet oder Desktop-Monitor. Dabei werden Layout, Schriftgrößen und Bilder so angepasst, dass die Seite auf jedem Gerät optimal dargestellt wird. Media Queries in CSS sind die technische Grundlage dafür.

Die wichtigsten Breakpoints sind: 375px (kleine Smartphones), 390px (iPhone 14), 768px (Tablets im Hochformat), 1024px (Tablets im Querformat / kleine Laptops) und 1920px (Full-HD-Monitore). Zusätzlich empfiehlt es sich, das Design bei beliebigen Zwischengrößen zu testen, um sicherzustellen, dass es bei jeder Breite funktioniert.

Der Responsive Tester zeigt eine gute Annäherung, wie eine Website bei einer bestimmten Viewport-Größe aussieht. Allerdings können sich echte Geräte in der Schriftdarstellung, Touch-Verhalten und Browser-Rendering unterscheiden. Für eine finale Prüfung empfehlen wir zusätzlich Tests auf echten Geräten oder den Chrome DevTools Device Mode.

Ja, neben den vordefinierten Geräte-Presets können Sie beliebige Breiten und Höhen manuell eingeben. Geben Sie einfach die gewünschten Werte in die Eingabefelder ein und klicken Sie auf „Anwenden". So können Sie jede beliebige Bildschirmgröße zwischen 200 und 3840 Pixeln testen.