Meine Bildschirmauflösung

Deine Display-Werte, sofort erkannt — ganz ohne Systemeinstellungen

Responsiver Viewport-Tester

Breiten-Preset auswählen, um zu sehen, wie Inhalte bei verschiedenen Viewport-Breiten umbrechen. Der Größen-Badge aktualisiert sich live.

Volle Breite
— px breit bei diesem Preset
Hinweis: Cross-Origin-iFrames werden von den meisten Seiten blockiert. Diese Vorschaubox simuliert nur die Breite.

Design-Breakpoints-Referenz

Häufig verwendete CSS-Breakpoints gängiger Frameworks. Deine aktuelle Viewport-Breite ist hervorgehoben.

Name Breakpoint-Bereich Typischer Einsatz

Referenz: Häufige Bildschirmauflösungen

Name / Gerät Auflösung Verhältnis DPR Häufige Geräte Kategorie

Browser-User-Agent

Lädt…

Was bedeuten diese Werte?

Bildschirmauflösung

Die Bildschirmauflösung gibt die Gesamtzahl der Pixel an, die dein Monitor darstellen kann, ausgedrückt als Breite × Höhe (z. B. 1920×1080). Sie ist eine Hardware-Eigenschaft — sie ändert sich nur, wenn du die Anzeigeeinstellungen änderst. Höhere Auflösung = mehr Pixel = schärferes Bild und mehr Inhalt auf dem Bildschirm.

Pixeldichte (DPR)

Der DPR gibt das Verhältnis physischer Pixel zu CSS-Pixeln (logisch) an. Ein DPR von 2 bedeutet, dass jeder CSS-Pixel mit 2×2 = 4 physischen Pixeln gerendert wird — alles sieht auf Retina- oder HiDPI-Displays schärfer aus. Die meisten modernen Smartphones haben einen DPR ≥ 2; viele MacBooks haben DPR = 2; manche Android-Geräte DPR = 3 oder höher.

Für Webentwickler: @media (-webkit-min-device-pixel-ratio: 2) oder window.devicePixelRatio in JavaScript nutzen, um HiDPI-Bildschirmen höher aufgelöste Bilder bereitzustellen.

Viewport vs. Bildschirmauflösung

Deine Bildschirmauflösung ist fest (z. B. 1920×1080). Der Viewport ist der Inhaltsbereich des Browser-Fensters — er verkleinert sich, wenn du den Browser in der Größe änderst, Browser-Chrome öffnest (DevTools, Seitenleisten) oder hineinzoomst. CSS-Media-Queries reagieren auf die Viewport-Größe, nicht auf die Bildschirmauflösung. Die angezeigte Viewport-Größe aktualisiert sich live, wenn du den Browser in der Größe änderst.

Farbtiefe

Die Farbtiefe (in Bit) bestimmt, wie viele verschiedene Farben jeder Pixel darstellen kann. 24 Bit = 16,7 Millionen Farben (Standard-True-Color). 30 Bit = 1,07 Milliarden Farben (Deep Color, auf professionellen Displays). Die meisten modernen Monitore haben 24 oder 30 Bit.

Bildschirmauflösung in den Systemeinstellungen prüfen

  • Windows 11: Rechtsklick auf den Desktop → Anzeigeeinstellungen → Anzeigeauflösung
  • macOS: Apple-Menü → Systemeinstellungen → Displays
  • Ubuntu/Linux: Einstellungen → Bildschirme
  • Oder einfach oben auf dieser Seite nachschauen — ohne Systemeinstellungen.

Häufig gestellte Fragen

Deine Bildschirmauflösung wird in der Karte "Bildschirmauflösung" oben auf dieser Seite angezeigt. Sie wurde automatisch vom Browser über die window.screen-API erkannt. Bei Retina/HiDPI-Displays zeigt die Zeile "Physische Pixel" die tatsächliche Hardware-Pixelanzahl (Bildschirmauflösung × DPR).
Der DPR gibt an, wie viele physische Pixel je logischen CSS-Pixel verwendet werden. DPR 1 = Standard-Display. DPR 2 = Retina (der Bildschirm hat 4× mehr Pixel als ein 1×-Display bei gleicher CSS-Größe). DPR 3 = typisch für viele Android-Geräte. Ein höherer DPR bedeutet schärferen Text und Bilder, erfordert aber höher aufgelöste Bilder, damit der Vorteil sichtbar wird.
Die Bildschirmauflösung sind die gesamten Pixel deines Monitor-Hardware (fest). Die Viewport-Größe ist der Bereich des Browser-Fensters, in dem aktuell Webinhalt angezeigt wird — sie ändert sich, wenn du den Browser in der Größe änderst, hinein- oder heraus-zoomst, DevTools öffnest oder schließt oder die Adressleiste ein-/ausblendet. CSS-Media-Queries reagieren auf die Viewport-Größe, nicht auf die Bildschirmauflösung. Der hier angezeigte Viewport aktualisiert sich live.
Rechtsklick auf den Desktop → Anzeigeeinstellungen → zur Anzeigeauflösung scrollen. Oder Win+I drücken, dann System → Anzeige. Du kannst auch einfach den Anfang dieser Seite prüfen — die Auflösung wird sofort ohne Navigation angezeigt.
Apple-Menü (oben links) → Systemeinstellungen → Displays. Unter dem Display-Namen siehst du die Auflösung. Bei älterem macOS: Systemeinstellungen → Monitore. Hinweis: Auf Retina-Macs zeigt macOS möglicherweise eine skalierte Auflösung (z. B. "Sieht aus wie 2560×1600") — das ist die logische Auflösung. Die physische Hardware-Auflösung ist das Doppelte davon.