Meine Bildschirmauflösung
Welche Auflösung hat mein Bildschirm – und wie viel Platz hat eine Webseite im Browserfenster wirklich? Die Werte werden direkt in Ihrem Browser gemessen und ändern sich live, wenn Sie das Fenster verkleinern, zoomen oder das Gerät drehen.
So wird gerechnet
Bei der Bildschirmauflösung gibt es mehrere richtige Antworten: die echten Pixel des Displays, die CSS-Pixel, mit denen der Browser rechnet, und den Viewport – den Bereich, den eine Webseite tatsächlich zur Verfügung hat. Dieses Tool zeigt alle Werte nebeneinander.
Was die Werte bedeuten
- Echte Pixel: Bildschirm in CSS-Pixeln × devicePixelRatio. Bei einem Full-HD-Laptop mit 125 % Skalierung meldet der Browser 1536 × 864 CSS-Pixel – × 1,25 ergibt die echten 1920 × 1080.
- devicePixelRatio: Wie viele echte Pixel auf ein CSS-Pixel kommen. 1 = klassischer Monitor, 2 oder 3 = Retina-/Handy-Display. Browser-Zoom und die Windows-Anzeigeskalierung verändern diesen Wert.
- Verfügbar: Bildschirm abzüglich Taskleiste oder Dock.
- Viewport: Innenmaß des Browserfensters (
innerWidth × innerHeight) – danach richten sich Media Queries und responsive Layouts. Der sichtbare Bereich (Visual Viewport) ist auf dem Handy kleiner, wenn Sie hineinzoomen oder die Tastatur offen ist. - Seitenverhältnis: exakt gekürzt (1920 × 1080 = 16:9) und, bei krummen Werten, das übliche Verhältnis (1366 × 768 ≈ 16:9).
- Breakpoint: Welche Stufe von Bootstrap 5 (sm ab 576, md ab 768, lg ab 992, xl ab 1200, xxl ab 1400 px) und Tailwind CSS (sm ab 640, md ab 768, lg ab 1024, xl ab 1280, 2xl ab 1536 px) bei der aktuellen Fensterbreite greift.
Typische Auflösungen
| Name | Pixel | Verhältnis |
|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 |
| HD / WXGA | 1366 × 768 | ≈ 16:9 |
| Full HD (1080p) | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / WQHD (1440p) | 2560 × 1440 | 16:9 |
| UWQHD | 3440 × 1440 | ≈ 21:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
Grenzen
Browser runden CSS-Pixel teils ab; die echten Pixel können deshalb um 1 abweichen (2561 statt 2560). Bei mehreren Monitoren zeigt der Browser den Bildschirm, auf dem das Fenster gerade liegt. Firefox kann mit aktiviertem Fingerprinting-Schutz (resistFingerprinting) absichtlich Standardwerte melden.
Häufige Fragen
Wie finde ich meine Bildschirmauflösung heraus?
Einfach diese Seite öffnen: Oben steht die Auflösung in echten Pixeln, darunter die Werte in CSS-Pixeln und die Größe des Browserfensters. Unter Windows finden Sie sie außerdem in Einstellungen → System → Bildschirm → Bildschirmauflösung.
Warum zeigt der Browser 1536 × 864 statt 1920 × 1080?
Weil Windows auf 125 % skaliert (oder der Browser-Zoom nicht auf 100 % steht). Der Browser rechnet dann in CSS-Pixeln: 1920 ÷ 1,25 = 1536. Die echten Pixel stehen oben – sie ergeben sich aus CSS-Pixeln × devicePixelRatio.
Was ist der Unterschied zwischen Bildschirmauflösung und Viewport?
Die Bildschirmauflösung ist die Größe des ganzen Displays. Der Viewport ist nur der Innenbereich des Browserfensters, ohne Tab-Leiste, Adressleiste und Taskleiste. Für Webdesign und Media Queries zählt der Viewport.
Was bedeutet devicePixelRatio 2 oder 3?
Das Display ist hochauflösend (Retina): Ein CSS-Pixel besteht aus 2 × 2 bzw. 3 × 3 echten Pixeln. Texte und Bilder wirken dadurch schärfer, Layouts bleiben aber gleich groß.
Werden meine Daten gespeichert?
Nein. Alle Werte werden nur in Ihrem Browser gelesen und angezeigt; es wird nichts gesendet oder gespeichert.
Quellen und Rechtsgrundlagen
- MDN Web Docs – Screen
- MDN Web Docs – Window.devicePixelRatio
- MDN Web Docs – Visual Viewport API
- MDN Web Docs – prefers-color-scheme
- Bootstrap 5.3 – Breakpoints
- Tailwind CSS – Responsive design
Stand:
Passende Werkzeuge
- Mein User-Agent: Browser und System erkennenZeigt Ihren User-Agent-String, erkennt Browser, Version, Engine, Betriebssystem und Gerätetyp, liest Client Hints aus. Fremde UAs prüfen. Alles lokal.
- Wie ist meine IP-Adresse?Zeigt Ihre öffentliche IP-Adresse sofort an, erkennt IPv4 oder IPv6 und erklärt den Unterschied. Kostenlos – die IP wird nicht gespeichert.
- Webcam-Test: Kamera testenKamera-Test im Browser: Livebild, echte Auflösung und Bildrate, 480p bis 4K anfordern, spiegeln, Foto speichern. Lokal, nichts wird hochgeladen.
- Tastatur-Test: Funktionieren alle Tasten?Tastatur online testen: Jede gedrückte Taste leuchtet auf, getestete Tasten bleiben markiert. Mit key/code-Anzeige und Ghosting-Test. Kostenlos.
- Base64 kodieren und dekodierenBase64 und Base64url kodieren/dekodieren mit korrektem UTF-8, dazu URL-Encode/Decode (Prozent-Kodierung). Mit Fehlerprüfung, lokal im Browser.
- CSS Border-Radius-GeneratorAbgerundete Ecken per Regler: alle Ecken gekoppelt oder einzeln, px oder %, elliptisch mit 8 Werten – kürzeste CSS-Schreibweise, Live-Vorschau, CSS kopieren.