Frontend-Entwicklung
Prüfe Breakpoints am echten DOM mit exakten Gerätebreiten, ohne DevTools-Umschalten und ohne Fenster-Akrobatik.
NeuWorkspace-Boards - 10 Geräte gleichzeitig
Deine Website, makellosauf jedem iPhone.
Viewport legt maßstabsgetreue Geräterahmen über die Seite, die du ohnehin gerade ansiehst. Vergleiche Breakpoints nebeneinander, finde Layoutfehler vor der QA und exportiere gerahmte Screenshots oder 4K-Aufnahmen, vollständig auf deinem eigenen Rechner.
Jede Seite · 38 Geräte · Einstellungen tab-übergreifend synchron · Kein Konto, keine Telemetrie, kein Upload
Chrome Web Store★ 5.0·Über 5.000 Nutzer
EmpfohlenVon Chrome empfohlen
yourstore.com
Für wen es gedacht ist
Eine Erweiterung, drei Arbeitsweisen
Für die, die responsive Oberflächen bauen, die, die sie gestalten, und die, die beweisen müssen, dass sie funktionieren.
Produktdesign
Prüfe Abstände, Typo-Skala und Safe Areas in exakten Rahmen und exportiere gerahmte Aufnahmen direkt in eine Spec oder ein Deck.
Agenturen und Freelancer
Zeige responsive Qualität live im Call. Ein einziger geteilter Bildschirm zeigt Desktop und Mobil gemeinsam, ganz ohne geteilte Fenster.
Fähigkeiten
Vier Dinge, die es absurd gut kann
Kein Funktionsbrei. Das sind die vier Fähigkeiten, um die herum die gesamte Erweiterung gebaut ist.
Live-Demo
Steuere die Erweiterung direkt hier
Das ist der echte Ablauf: Gerät in der Leiste wählen, drehen, Screenshot auslösen, Aufnahme starten. Die Seite dahinter ist deine.
yourpage.com
402 x 874/34%
Vom Build bis zur Abnahme
Beweise, dass es funktioniert, bevor jemand fragt
Responsive Qualität lässt sich weit leichter zeigen als beschreiben. Viewport macht aus einer internen Prüfung etwas, das du direkt an Kundinnen und Kunden weitergeben kannst.
Erste Schritte
In drei Klicks einsatzbereit
Keine Konfigurationsdatei, kein Konto, kein Projekt-Setup.
01
Beliebige Seite öffnen
Klicke auf das Symbol in der Leiste. Ein Gerät erscheint über der echten Seite, bereits geladen und voll bedienbar.
02
Ansicht einrichten
Wähle ein Gerät, drehe, skaliere und ziehe es überallhin, oder baue ein ganzes Board aus Smartphones, Tablets und Monitoren.
03
Vergleichen und aufnehmen
Scrolle im Gleichschritt über alle Rahmen und exportiere dann einen gerahmten Screenshot oder nimm den kompletten Durchlauf auf.
Gemessen, nicht behauptet
Wo Viewport vorne liegt
Geprüft gegen die meistinstallierten Responsive-Vorschau-Erweiterungen im Chrome Web Store.
Local-First-Architektur
Nichts verlässt deinen Rechner, und wir legen offen wie
Viewport hat kein Backend für deine Daten. Keine Analytik, keine Telemetrie, kein aus der Ferne geladener Code. Einstellungen liegen in chrome.storage.local; Aufnahmen landen direkt auf deiner Festplatte.
Um eine Seite in einem Rahmen darzustellen, verlangen Browser, dass wir X-Frame-Options und Content-Security-Policy für die Vorschau-Anfrage lockern. Wir begrenzen das auf den Vorschau-Origin allein (Frames Dritter behalten ihren Schutz) und zeigen einen Hinweis, solange es aktiv ist. Es wird entfernt, sobald du die Vorschau schließt.
Die meisten Werkzeuge tun das stillschweigend und für den ganzen Tab. Uns ist lieber, du weißt es.
Preise
Für immer kostenlos. Pro, wenn die Arbeit es verlangt.
Die kostenlose Stufe ist ein echtes Werkzeug ohne Zeitlimit, keine Testversion.
Kostenlos
$0für immer
- Alle 38 Geräterahmen
- Bis zu 3 Geräte gleichzeitig
- Unbegrenzt gerahmte Screenshots
- 2 Minuten WebM-Aufnahme
- Rückfall auf echtes Fenster bei strengen Seiten
Pro
Am beliebtesten$4.17/ Monat, $50 jährlich abgerechnet
- Alles aus Kostenlos, dazu:
- Boards mit 10 Geräten und gespeicherte Szenen
- Unbegrenztes 4K-MP4, Zuschnitt und Tempo
- Build-Vergleich und Layout-Audits
- Netzwerkdrosselung, Standort und Sprache
Kostenlos, ohne KontoJederzeit kündbarSichere Zahlung über Lemon Squeezy
FAQ
Antworten, bevor du fragst
Die fünf Fragen, die jede Entwicklerin und jeder Entwickler vor der Installation stellt.
Nein, und nichts, was im Browser läuft, tut das. Viewport rendert deine echte Seite mit den tatsächlichen Viewport-Breiten der Geräte und passenden Client Hints, was die überwiegende Mehrheit der Layout- und Breakpoint-Probleme findet. Release-kritische Prüfungen gehören weiterhin auf echte Geräte.
Schluss mit Breakpoints, die du nie gesehen hast.
Füge Viewport zu Chrome hinzu und prüfe jedes Gerät auf der Seite, die du ohnehin vor dir hast. Kostenlos, ohne Konto, ohne Upload.