Bildschirmauflösung anzeigen
Bildschirmauflösung anzeigen: Hier sehen Sie Auflösung, Viewport-Größe, Pixeldichte (devicePixelRatio), Farbtiefe und Farbschema Ihres Geräts, live aktualisiert.
| Eigenschaft | Wert |
|---|
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
Bildschirmauflösung anzeigen und verstehen
Diese Seite zeigt die Bildschirmauflösung Ihres Geräts und weitere Werte, die der Browser kennt: die Größe in CSS-Pixeln, die physische Auflösung, die Viewport-Größe des Fensters, die Pixeldichte als devicePixelRatio, die Farbtiefe, die Ausrichtung und das bevorzugte Farbschema (hell oder dunkel). Die Werte aktualisieren sich, wenn Sie das Fenster vergrößern oder das Gerät drehen.
Wichtig ist der Unterschied zwischen CSS-Pixeln und Gerätepixeln. Ein Notebook mit 2560 × 1600 Pixeln und 200 Prozent Skalierung meldet dem Browser 1280 × 800 CSS-Pixel und ein devicePixelRatio von 2. Die Seite rechnet die physische Auflösung als CSS-Größe mal Pixeldichte aus. Bei krummen Skalierungen wie 125 oder 150 Prozent unter Windows kann das Ergebnis um ein, zwei Pixel abweichen; der Browser-Zoom verändert ebenfalls das devicePixelRatio. Die Viewport-Größe ist der Bereich, in dem eine Website tatsächlich dargestellt wird, ohne Browserleisten.
Entwickler nutzen die Werte, um Breakpoints im CSS zu prüfen, Fehlerberichte zu ergänzen oder Bilder in passender Größe auszuliefern (srcset). Beim Kopieren erhalten Sie alle Werte als Text. Zum Prüfen des Displays auf Fehler eignet sich der Pixelfehler-Test. Die Daten werden nur angezeigt und nicht gespeichert oder übertragen.
Anleitung: Bildschirmauflösung in 3 Schritten
- Die Seite öffnen: Auflösung, Viewport-Größe, Pixeldichte, Farbtiefe, Ausrichtung und Farbschema stehen sofort in der Tabelle.
- Das Browserfenster vergrößern, verkleinern oder das Gerät drehen; die Werte aktualisieren sich live.
- Mit „Alle Werte kopieren“ die Angaben als Text übernehmen, etwa für einen Fehlerbericht.
Typische Anwendungsfälle
- Fehlerberichte ergänzen: Nutzer kopieren ihre Werte, damit Entwickler ein Darstellungsproblem nachstellen können.
- Breakpoints testen: Beim Verkleinern des Fensters sehen, bei welcher Viewport-Breite das Layout umbricht.
- Bilder planen: Aus dem devicePixelRatio ablesen, welche Bildgrößen im srcset nötig sind.
- Skalierung prüfen: Kontrollieren, wie Windows-Skalierung oder Browser-Zoom die gemeldeten Werte verändern.
Häufige Fragen
Wie finde ich meine Bildschirmauflösung heraus?
Öffnen Sie diese Seite: Oben steht die physische Auflösung in Gerätepixeln, darunter die Werte in CSS-Pixeln. Unter Windows finden Sie die Einstellung auch unter Einstellungen, System, Bildschirm.
Warum zeigt die Seite eine kleinere Auflösung als mein Monitor?
Browser rechnen in CSS-Pixeln. Bei Skalierung oder hochauflösenden Displays entspricht ein CSS-Pixel mehreren Gerätepixeln. Die physische Auflösung ergibt sich aus CSS-Größe mal devicePixelRatio.
Was ist die Viewport-Größe?
Der sichtbare Bereich der Webseite im Browserfenster. Er ist kleiner als der Bildschirm, weil Taskleiste, Adressleiste und Ränder abgezogen werden. CSS-Media-Queries beziehen sich auf den Viewport.
Was bedeutet Pixeldichte?
Das Verhältnis von Gerätepixeln zu CSS-Pixeln, im Browser als devicePixelRatio. Ein Wert von 2 oder 3 ist typisch für Smartphones und Retina-Displays.
Werden diese Daten gespeichert?
Nein. Die Werte werden nur im Browser ausgelesen und angezeigt.
Welche Bildschirmauflösung hat mein Handy?
Öffnen Sie diese Seite auf dem Handy: Sie zeigt die Größe in CSS-Pixeln und die physische Auflösung, die sich aus CSS-Größe mal devicePixelRatio ergibt. Webseiten richten ihr Layout nach den CSS-Pixeln.
Wie prüfe ich, ob mein Browser den Dunkelmodus meldet?
Die Zeile Farbschema zeigt, ob der Browser hell oder dunkel bevorzugt (prefers-color-scheme). Ändern Sie die Einstellung im System oder Browser und laden Sie die Seite danach neu, um den Wert zu prüfen.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen