Viewport-Größe & Responsive-Breakpoint-Tester
Sehen Sie, wie groß Ihr Browserfenster für eine Webseite tatsächlich ist. Dieses Tool liest Ihre Viewport-Breite und -Höhe in CSS-Pixeln, Ihre Device Pixel Ratio und Ausrichtung aus und zeigt, in welchen responsiven Breakpoint die aktuelle Größe fällt — alles live. Ändern Sie die Fenstergröße, und jeder Wert aktualisiert sich sofort.
Ändern Sie die Größe Ihres Browserfensters und beobachten Sie, wie sich diese Werte live aktualisieren.
Tailwind-CSS-Breakpoints
Der Bereich, in den Ihr Viewport fällt, wird hervorgehoben, während Sie die Größe ändern.
| Präfix | Mindestbreite | Gilt ab |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Gerätekategorien
Größenveränderbares Test-Panel
Ziehen Sie die untere rechte Ecke, um die Größe dieses Panels zu ändern. Es meldet seine eigene Größe und welchen Breakpoint diese Breite erreichen würde — ein schneller Responsive-Messwert.
Gängige Geräte-Viewport-Größen
Ungefähre Hochformat-CSS-Pixel-Viewports zur Orientierung — die tatsächlichen Werte variieren je nach Browser und Betriebssystem.
| Gerät | Viewport (CSS px) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Verwandte Tools
Was ein Viewport ist
Der Viewport ist der sichtbare Bereich, in den eine Webseite zeichnen kann — der Inhaltsbereich Ihres Browserfensters, ohne Tabs, Adressleiste oder Lesezeichenleiste. Deshalb ist er fast immer kleiner als Ihre Bildschirmauflösung: Der Bildschirm ist das gesamte Panel, während der Viewport nur der Ausschnitt ist, den die Seite nutzen kann. window.innerWidth und window.innerHeight geben diesen Bereich in CSS-Pixeln an, und documentElement.clientWidth/clientHeight geben den Layout-Viewport an (denselben Bereich abzüglich der Breite einer klassischen Bildlaufleiste, sofern vorhanden). Da sich der Viewport in dem Moment ändert, in dem Sie die Größe ändern, den Bildschirm teilen oder das Gerät drehen, ist er die Zahl, auf die responsive Layouts tatsächlich reagieren.
CSS-Pixel vs. physische Pixel und devicePixelRatio
Ein CSS-Pixel ist eine Layout-Einheit, kein physischer Punkt auf dem Panel. Auf einem Standardbildschirm entspricht ein CSS-Pixel einem physischen Pixel, aber hochauflösende „Retina“-Bildschirme packen zwei oder drei physische Pixel in jedes CSS-Pixel, damit Text schärfer aussieht. window.devicePixelRatio gibt diesen Multiplikator an: Ein Wert von 2 bedeutet, dass ein 1440 CSS-Pixel breiter Viewport mit 2880 physischen Pixeln dargestellt wird. Webseiten werden in CSS-Pixeln layoutet, sodass ein Smartphone mit einem 390 Pixel breiten Viewport und einem DPR von 3 ein physisches Panel von etwa 1170 Pixeln Breite hat. Um die vollständige physische Auflösung und Pixeldichte Ihres Bildschirms zu sehen, nutzen Sie die Tools What Is My Screen Size und Screen Resolution Test.
Responsive Breakpoints
Ein Breakpoint ist eine Viewport-Breite, bei der sich ein Layout ändert — Spalten stapeln sich, ein Menü klappt zusammen, Schrift wird angepasst. CSS-Media-Queries und Utility-Frameworks wie Tailwind CSS definieren eine kleine Menge benannter Breiten und wenden Stile ab dieser Breite aufwärts an. Die Standardwerte von Tailwind sind sm bei 640px, md bei 768px, lg bei 1024px, xl bei 1280px und 2xl bei 1536px; unter 640px befinden Sie sich im unpräfixierten base-Bereich. Die untenstehende Referenz hebt den aktiven Bereich hervor, während Sie die Größe ändern, und das ziehbare Test-Panel zeigt an, welchen Breakpoint seine eigene Breite erreichen würde — eine schnelle Möglichkeit, zu sehen, wie sich eine Komponente bei verschiedenen Größen verhält, ohne das gesamte Fenster zu verändern.
Warum innerWidth von der Bildschirmbreite abweicht
Zwischen der Auflösung Ihres Panels und dem Viewport, den eine Seite sieht, liegen mehrere Faktoren. Browser-Chrome (Tabs, Symbolleisten und eine sichtbare Bildlaufleiste) zieht von der nutzbaren Fläche ab. Auch die Seitenzoomstufe ändert das: Beim Hineinzoomen passen weniger CSS-Pixel hinein, sodass innerWidth sinkt, obwohl sich das Fenster nicht bewegt hat, und es beeinflusst auch devicePixelRatio. Auf Mobilgeräten sagt das Meta-Viewport-Tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — dem Browser, den Layout-Viewport auf die Gerätebreite zu setzen, anstatt vorzugeben, ein ~980px breiter Desktop zu sein, weshalb responsive Websites es benötigen. Die Bildschirmskalierung des Betriebssystems ändert ebenfalls die Anzahl der CSS-Pixel, weshalb zwei identische Monitore unterschiedliche Viewport-Größen melden können.