Wie hoch ist meine Bildschirmauflösung? Viewport, DPR und Breakpoints | We.Inc
Sieh live deine Bildschirmauflösung, die Viewport-Größe deines Browsers und die Device Pixel Ratio, dazu deinen aktuellen Tailwind- und Bootstrap-Breakpoint und eine Tabelle gängiger Gerätegrößen.
Deine Bildschirmauflösung steht im ersten Feld dieser Seite, gemessen von deinem Browser beim Laden. Sie wird in CSS-Pixeln angegeben; multipliziere sie mit der Device Pixel Ratio, um die physischen Pixel zu erhalten. Die Seite zeigt außerdem den Viewport deines Browsers, also die Fläche, die deine Website tatsächlich bekommt, und aktualisiert sich live, wenn du das Fenster veränderst.
Was die einzelnen Werte bedeuten
Messwert
Bedeutung
Bildschirm
Die gesamte Anzeige, in CSS-Pixeln
Viewport
Der sichtbare Seitenbereich im Browserfenster
Device Pixel Ratio
Physische Pixel pro CSS-Pixel (2 oder 3 bei den meisten Smartphones)
Physische Auflösung
Bildschirmgröße multipliziert mit der Pixel Ratio
Bildschirmgröße, Viewport-Größe, Device Pixel Ratio, Ausrichtung und Farbtiefe, live aus deinem Browser ausgelesen. Außerdem siehst du, in welchen Tailwind- und Bootstrap-Breakpoint das aktuelle Fenster fällt, mit Media Queries zum Kopieren und einer Tabelle gängiger Gerätegrößen.
Öffne die Seite. Die Werte stammen aus den screen- und window-Objekten deines Browsers, es wird also nichts installiert und nichts übertragen.
Ändere die Fenstergröße oder drehe dein Smartphone. Viewport, Breakpoint und Ausrichtung aktualisieren sich sofort.
Im Breakpoint-Bereich siehst du, welche Tailwind- und Bootstrap-Breakpoints bei der aktuellen Breite greifen.
Kopiere eine Media Query für einen beliebigen Breakpoint oder vergleiche deine Werte mit der Gerätetabelle unten.
Gestalte für Viewport-Breiten, nicht für Bildschirmauflösungen. Ein Bildschirm mit 1920 Pixeln kann ein Browserfenster mit 1200 Pixeln zeigen, und nur dieses Fenster steht deinem Layout zur Verfügung.
Teste bei 360 und 390 Pixeln Breite. Viele Android-Smartphones melden 360 bis 412 CSS-Pixel und aktuelle iPhones 375 bis 440, ein Layout, das bei 360 funktioniert, deckt also die meisten Smartphones ab.
Liefere Bilder in doppelter Anzeigegröße aus oder nutze srcset, damit sie auf Bildschirmen mit einer Pixel Ratio von 2 oder mehr scharf bleiben.
Der Browser-Zoom verändert sowohl den Viewport als auch die Pixel Ratio. Wenn die Werte seltsam wirken, setze den Zoom mit Ctrl+0 oder Cmd+0 zurück und prüfe erneut.
Häufige Fragen
Warum ist meine Bildschirmauflösung kleiner als die Angabe meines Monitors?
Browser geben Größen in CSS-Pixeln an. Wenn dein Betriebssystem die Anzeige skaliert, zum Beispiel auf 150% bei einem 4K-Monitor oder auf jedem Retina-Mac, deckt ein CSS-Pixel mehrere physische Pixel ab. Multipliziere die Bildschirmgröße mit der hier angezeigten Device Pixel Ratio, um die physische Auflösung zu erhalten.
Was ist der Unterschied zwischen Bildschirmgröße und Viewport-Größe?
Die Bildschirmgröße ist die gesamte Anzeige. Die Viewport-Größe ist der Teil des Browserfensters, der die Seite zeigt, ohne Adressleiste, Tabs, Symbolleisten und angedockte Bereiche. Websites richten ihr Layout am Viewport aus, deshalb ist das der Wert für Responsive Design.
Was ist die Device Pixel Ratio?
Sie gibt an, wie viele physische Pixel in jeder Richtung ein CSS-Pixel darstellen. Eine Ratio von 1 entspricht einem Standarddisplay, 2 ist bei Laptops mit hochauflösenden Bildschirmen und bei Tablets üblich, 3 bei Smartphones. Sie ändert sich auch, wenn du die Seite zoomst.
Welche Breakpoints sollte ich für Responsive Design verwenden?
Beginne mit den Standardwerten deines Frameworks, die auf dieser Seite für Tailwind und Bootstrap aufgeführt sind, und füge dann überall dort einen Breakpoint hinzu, wo dein eigener Inhalt gedrängt oder gestreckt wirkt. Breakpoints sollten sich am Inhalt orientieren, nicht an bestimmten Geräten.
Werden Daten über mein Gerät gespeichert?
Nein. Die Werte werden in deinem Browser ausgelesen und auf der Seite angezeigt. Sie werden weder an uns gesendet noch gespeichert.
CSS-Pixel und physische Pixel
Ein CSS-Pixel ist eine Längeneinheit, kein Punkt auf dem Bildschirm. Auf einem Smartphone mit einer Pixel Ratio von 3 wird eine Box mit 100 mal 100 CSS-Pixeln mit 300 mal 300 physischen Pixeln gezeichnet. Deshalb meldet ein Smartphone mit einem 1179 Pixel breiten Display den Websites eine Breite von 393 Pixeln: Der Browser zeigt die Seite in einer angenehm lesbaren Größe und zeichnet sie mit zusätzlicher Detailschärfe.
Für das Layout zählen nur CSS-Pixel. Bei Bildern spielen auch die physischen Pixel eine Rolle, denn ein Bild, das in CSS-Pixeln genau so breit ist wie seine Box, wirkt auf einem Bildschirm mit einer Ratio von 2 oder 3 unscharf.
Breakpoints in der Praxis
Tailwind und Bootstrap arbeiten Mobile First: Styles ohne Präfix gelten bei jeder Breite, und jeder Breakpoint fügt ab seiner Mindestbreite aufwärts Regeln hinzu. md bedeutet in Tailwind 768 Pixel und breiter, nicht nur Tablets.
Der Breakpoint-Bereich auf dieser Seite misst den Viewport genauso wie die Media Queries dieser Frameworks. Was er anzeigt, sind also die Klassen, die in diesem Fenster gerade aktiv wären.
Standard-Breakpoints (min-width) in Tailwind CSS und Bootstrap 5
Framework
Breakpoint
Gilt ab
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Viewport-Größen gängiger Geräte in CSS-Pixeln (Hochformat), mit Pixel Ratio und physischen Pixeln
Typ
Gerät oder Einstellung
Viewport (CSS px)
Pixel Ratio
Physische Pixel
Smartphone
iPhone SE (2. und 3. Generation)
Smartphone
iPhone 13 und 14
Smartphone
iPhone 15 und 16
Smartphone
iPhone 16 Pro
Smartphone
iPhone 15 Plus und 16 Plus
Smartphone
iPhone 16 Pro Max
Smartphone
Samsung Galaxy S24
Smartphone
Google Pixel 8
Tablet
iPad mini (6. Generation)
Tablet
iPad (10. Generation)
Tablet
iPad Pro 11 Zoll (4. Generation)
Tablet
iPad Pro 12,9 Zoll
Laptop
HD-Laptop
Laptop
Full HD mit 125% Skalierung
Laptop
MacBook Air 13 Zoll (M2, Standard)
Desktop
Full-HD-Monitor
Desktop
QHD-Monitor
Desktop
4K-Monitor mit 150% Skalierung
Hochformat
Querformat
Media Query für {name} kopieren
Bildschirm {sw}×{sh} (physisch {pw}×{ph}), Viewport {vw}×{vh}, Device Pixel Ratio {dpr}
Dein Bildschirm gerade jetzt
Bildschirmauflösung (CSS px)
Seitenverhältnis {ratio}
Physische Auflösung
Bildschirm × Device Pixel Ratio
Browser-Viewport
Die Fläche, in der deine Seite angeordnet wird
Device Pixel Ratio
Ändert sich mit dem Browser-Zoom
Verfügbarer Bildschirm
Bildschirm abzüglich Taskleiste oder Dock
Ausrichtung und Farbe
{orientation}, {depth} Bit
Touchscreen erkannt
Kein Touchscreen erkannt
Diese Werte kopieren
Dein Bildschirm wird ausgelesen. Dafür ist JavaScript nötig.
In welchem Breakpoint du bist
Gemessen an der Viewport-Breite{width}. Ändere die Fenstergröße und sieh zu, wie sich der Wert ändert.