So nutzt du: Bildschirmauflösung
- Seite öffnen – die Werte erscheinen sofort.
- Fenster vergrößern oder verkleinern bzw. das Handy drehen, um die Änderung des Viewports zu sehen.
- Die Details kopieren, um sie in einem Bug-Report zu teilen.
Bildschirmauflösung vs. Viewport
- Bildschirmauflösung ist die Größe des gesamten Displays in CSS-Pixeln (
screen.width × screen.height). - Viewport ist der Bereich des Browserfensters, der der Seite zur Verfügung steht (
innerWidth × innerHeight); daran orientieren sich CSS-Media-Queries. - Device Pixel Ratio (DPR) ist die Anzahl physischer Pixel pro CSS-Pixel. Ein Handy mit DPR 3 und einem 390 Pixel breiten Viewport hat tatsächlich 1170 physische Pixel in der Breite.
Gängige Bildschirmgrößen
| Gerätetyp | CSS-Viewport | DPR |
|---|---|---|
| Modernes iPhone | 390–430 × 844–932 | 3 |
| Android-Handy | 360–412 × 780–915 | 2,6–3,5 |
| iPad | 768–1032 × 1024–1376 | 2 |
| Laptop | 1280–1536 × 720–960 | 1–2 |
| Full-HD-Monitor | 1920 × 1080 | 1 |
| 4K-Monitor (skaliert) | 1920–2560 × 1080–1440 | 1,5–2 |
Warum die Zahlen „falsch“ aussehen
Betriebssysteme skalieren das Display: Ein 4K-Bildschirm mit 150 % Skalierung meldet 2560 × 1440 CSS-Pixel bei DPR 1,5. Auch der Browser-Zoom ändert den DPR – zoomst du auf 200 %, halbiert sich der Viewport. Das ist erwartetes Verhalten und kein Fehler.
Für Entwickler
Gestalte mit CSS-Pixeln und teste die gängigen Viewport-Breiten (360, 390, 768, 1024, 1280, 1536). Liefere scharfe Bilder für hochauflösende Displays mit srcset und passe sie mit dem Bildgrößen-Tool an. Fließende Typografie mit dem clamp()-Rechner kommt bei Schriftgrößen ganz ohne Breakpoints aus.
Auch gesucht als: meine bildschirmauflösung, bildschirmgröße, viewport größe, welche auflösung habe ich, device pixel ratio, browserfenster größe, bildschirmauflösung prüfen.
Passende Tools zu: Bildschirmauflösung
- Wie lautet meine IP-Adresse? — Deine öffentliche IP-Adresse und alles, was dein Browser den von dir besuchten Websites preisgibt – User-Agent, Bildschirmauflösung, Sprache, Zeitzone und Request-Header.
- User Agent Parser — Entschlüssle jeden User-Agent-String in Browser, Engine, Betriebssystem und Gerät und finde heraus, ob er zu einer Suchmaschine, einem KI-Crawler oder einem Skript gehört.
- Seitenverhältnis-Rechner — Bilder und Videos ohne Verzerrung skalieren: Verhältnis und eine Seite eintragen, um die andere zu erhalten, oder eine Größe eingeben, um ihr Verhältnis zu finden – mit fertigem CSS-Code zum Einfügen.
- PX zu REM Umrechner — Rechne zwischen Pixeln, rem und em mit deiner eigenen Root-Schriftgröße um – oder füge ein ganzes Stylesheet ein und konvertiere jeden px-Wert auf einmal.
Häufige Fragen
Warum zeigt mein 4K-Monitor eine kleinere Auflösung an?
Display-Skalierung: Windows und macOS vergrößern alles, daher meldet der Browser die skalierte Größe in CSS-Pixeln. Multipliziere sie mit dem Device Pixel Ratio, um die physische Auflösung zu erhalten.
Was ist der Unterschied zwischen Bildschirmgröße und Viewport?
Der Viewport schließt Browser-Symbolleisten, Tabs und Fensterrahmen aus – er ist der Platz, der der Webseite tatsächlich zur Verfügung steht.
Werden diese Informationen irgendwohin gesendet?
Nein. Sie werden von deinem Browser ausgelesen und nur auf dieser Seite angezeigt.
Kann ich Bildschirmauflösung als Web-App installieren und offline nutzen?
Ja. Bildschirmauflösung ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.