Responsive-Vorschau
Vorschau von responsivem Design
auf 12 Gerätebreiten durch einfache URL-Eingabe.
* Wenn die Seite nicht geladen wird, kann das Einbetten von iframes eingeschränkt sein.
Das könnte dir auch gefallen
Über Responsive-Vorschau
Responsive-Vorschau ist ein kostenloses Tool zur Unterstützung der Webentwicklung, mit dem Sie schnell direkt in Ihrem Browser überprüfen können, wie eine einzelne URL auf verschiedenen Bildschirmgrößen (Smartphones, Tablets und Desktops) aussieht. Auch ohne mehrere physische Geräte können Sie mit gängigen Geräteauflösungen wie iPhones, iPads und PCs auf Designbrüche und Layoutverhalten testen.
Verwendung
URL eingeben
Fügen Sie die URL der Website, die Sie in der Vorschau anzeigen möchten, in das Eingabefeld ein und klicken Sie auf die Schaltfläche "Vorschau".
Gerät auswählen
Wechseln Sie zwischen den Registerkarten Mobil, Tablet und Desktop und wählen Sie das spezifische Gerät aus (z. B. iPhone 15 Pro Max), das Sie überprüfen möchten.
Ausrichtung & Skalierung anpassen
Wechseln Sie zwischen Hoch- und Querformat. Wenn der Bildschirm nicht passt, passen Sie die Skalierung an (z. B. 50 %, 75 %), um die gesamte Ansicht zu sehen.
Glossar
- Responsive Webdesign
- Ein Ansatz in der Webentwicklung, der dynamische Änderungen am Erscheinungsbild einer Website ermöglicht, abhängig von der Bildschirmgröße und Ausrichtung des verwendeten Geräts.
- Viewport
- Der sichtbare Bereich einer Webseite für den Benutzer. Auf mobilen Geräten wird das Tag
<meta name="viewport" ...>verwendet, um die Anzeigebreite und Skalierung zu steuern. - Media Queries
- Eine CSS3-Funktion, mit der die Darstellung von Inhalten an Bedingungen wie Bildschirmauflösung, -breite oder -höhe angepasst werden kann.
Häufig gestellte Fragen
- Q.Der Vorschaubildschirm ist leer und die Website wird nicht angezeigt. Warum?
- Wenn die Ziel-Website als Sicherheitsmaßnahme 'X-Frame-Options' oder 'Content-Security-Policy' festgelegt hat und das Einbetten von iframes von anderen Seiten nicht zulässt, blockiert der Browser die Anzeige.
- Q.Kann ich eine Vorschau einer URL in einer lokalen Umgebung (localhost) anzeigen?
- Ja, das können Sie. Wenn auf Ihrem PC ein lokaler Server läuft, können Sie eine URL wie http://localhost:3000 eingeben, um diese zu testen.
Anwendungsfälle
Überprüfung während der Webentwicklung
Testen Sie schnell, wie neu erstellte Webseiten auf Smartphones oder PCs aussehen, und erkennen Sie Layoutbrüche während des Produktionsprozesses.
Letzter Check vor der Veröffentlichung
Überprüfen Sie vor der Veröffentlichung von Blogbeiträgen oder Landingpages, ob diese wie beabsichtigt angezeigt werden, ohne physische Geräte zu benötigen.
Designs mit Kunden teilen
Verwenden Sie es als Bestätigungstool, wenn Sie Kunden zeigen, wie ihre Website auf verschiedenen Geräten aussehen wird.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.