Viewport-Größe & Responsive-Breakpoint-Tester

Der Viewport ist der Bereich, in den eine Webseite zeichnen kann – Ihr Browserfenster abzüglich Tabs, Adressleiste und Scrollbalken. 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. Er wird in CSS-Pixeln, Layout-Einheiten statt physischen Punkten, gemessen – hochdichte „Retina“-Displays packen zwei oder drei physische Pixel in jedes CSS-Pixel, damit der Text schärfer wirkt, und window.devicePixelRatio meldet diesen Multiplikator.

Dieses Tool liest window.innerWidth und window.innerHeight bei jeder Änderung der Größe und Ausrichtung, zusammen mit dem Layout-Viewport von documentElement.clientWidth/clientHeight, dem Device Pixel Ratio und der Ausrichtung Ihres Geräts. Ein Breakpoint ist eine Viewport-Breite, bei der sich ein Layout ändert – Spalten stapeln sich, ein Menü klappt zusammen, die Schriftgröße ändert sich – und Frameworks wie Tailwind CSS wenden Stile ab einer Reihe benannter Breiten aufwärts an. Die untenstehende Referenz hebt den Bereich hervor, in den Ihre Breite fällt, und das ziehbare Testpanel meldet den Breakpoint, den seine eigene Breite erreichen würde, sodass Sie eine Komponente in der Vorschau ansehen können, ohne die Größe Ihres gesamten Fensters zu ändern. Alles läuft lokal; nichts wird hochgeladen.

Wenn die Zahlen falsch aussehen, liegen mehrere Dinge zwischen der Auflösung Ihres Panels und dem Viewport, den eine Seite sieht. Browser-Chrome und Scrollbalken ziehen vom nutzbaren Bereich ab, und Seitenzoom verringert die CSS-Pixelanzahl – sodass innerWidth sinkt, ohne dass sich das Fenster bewegt – ebenso wie die Display-Skalierung des Betriebssystems, weshalb zwei identische Monitore unterschiedliche Größen melden können. Bei Telefonen legt das Meta-Viewport-Tag <meta name="viewport" content="width=device-width, initial-scale=1"> die Seite auf Gerätebreite an, anstatt einen ~980px-Desktop vorzutäuschen, sodass ein 390-px-Viewport bei DPR 3 auf einem Panel mit etwa 1170 physischen Pixeln sitzt. 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.

Häufige responsive Breakpoints