Zuerst die obere Zusammenfassung lesen
Die erste Karte zeigt den aktuellen Viewport in CSS-Pixeln, die ungefähre Geräte-Pixel-Bildschirmgröße und die wichtigsten Chips wie Geräteklasse, Ausrichtung, Breakpoint, DPR und Zoom.
Free, privacy-first
Was ist meine Bildschirmauflösung?
Prüfe Bildschirmauflösung, Viewport-Größe, Device Pixel Ratio, Zoom und responsive Breakpoints sofort. Mobilfreundlich, lokal im Browser und ideal für Entwickler, Designer, QA und Alltagsnutzer.
Live-Arbeitsbereich für Bildschirm und Viewport
Einordnung und nächste Schritte
Der Abschnitt unten erklärt, wie du die Live-Messwerte richtig liest, wie sie responsive Layouts beeinflussen und welche nächsten Tools bei gerätespezifischen Problemen sinnvoll sind.
Warum dieser Bildschirmauflösungs-Prüfer nützlicher ist als eine einfache Viewport-Anzeige
Viele Seiten für "Was ist meine Bildschirmauflösung?" zeigen nur Breite, Höhe und DPR. Das reicht nicht, wenn du responsive Layouts debuggen, Screenshot-Größen prüfen, Zoom-Verhalten erklären oder einen mobilen Fehler reproduzieren willst. Diese Seite trennt gemeldete Bildschirm-CSS-Pixel, ungefähre Geräte-Pixel, Layout-Viewport, visuellen Viewport, Browser-Overhead und gängige Breakpoint-Systeme an einem Ort.
- Sieh den Unterschied zwischen <strong>gemeldeter Bildschirmgröße</strong>, <strong>Viewport-Größe</strong> und <strong>ungefährer Geräte-Pixel-Ausgabe</strong>.
- Prüfe aktuelle <strong>Tailwind</strong>-, <strong>Bootstrap</strong>- und <strong>generische responsive Breakpoints</strong> sofort.
- Verfolge <strong>Resize-Verlauf</strong> und speichere <strong>lokale Snapshots</strong> für QA, Bugreports und Screenshots.
- Alles bleibt <strong>lokal im Browser</strong>, damit keine sensiblen Geräte- oder Umgebungsdaten hochgeladen werden.
So liest du das Live-Ergebnis richtig
Starte mit der Viewport-Breite, denn sie entscheidet meist über Media Queries und responsive Layoutwechsel. Nutze danach Bildschirmgröße und DPR, um zu verstehen, wie das Gerät diese CSS-Pixel tatsächlich rendert.
- Nutze <strong>Viewport (CSS-Pixel)</strong>, wenn du wissen willst, welches responsive Layout die Seite gerade wirklich verwendet.
- Nutze <strong>Ungefähre Bildschirm-Pixel</strong>, wenn dir Screenshot-Schärfe, Canvas-Dichte oder Bildexportqualität wichtig sind.
- Nutze <strong>Visuellen Viewport</strong> und <strong>Zoom</strong>, wenn sich der sichtbare Bereich ohne klassischen Resize ändert.
- Nutze <strong>Browser-UI-Differenz</strong>, wenn ein Kunde sagt, dass sich eine Seite mobil enger anfühlt, obwohl das Gerät eigentlich groß ist.
Wichtige Annahmen
- Browser melden Bildschirmdimensionen über CSS-orientierte APIs, nicht zwingend als rohe Panel-Hardware-Pixel.
- Ungefähre Geräte-Pixel werden aus <strong>gemeldeten Bildschirm-CSS-Pixeln × DPR</strong> abgeleitet.
- Zoom, visueller Viewport, Browser-UI und Systemleisten können die nutzbare Seitenfläche kleiner machen als den gemeldeten Bildschirm.
So nutzt du das Tool effektiv
Dieses Layout ist so gebaut, dass du die Hauptfrage auf dem Smartphone in wenigen Sekunden beantworten kannst und tiefere Diagnostik nur dann öffnest, wenn du sie brauchst.
Breakpoints prüfen, wenn Layouts springen
Öffne das Breakpoints-Panel, um zu sehen, wie die aktuelle Breite in Tailwind, Bootstrap und generische responsive Bereiche fällt.
Verlauf nutzen, wenn du resize, rotierst oder zoomst
Der Verlauf zeigt aktuelle Zustände, und gespeicherte Snapshots helfen bei wiederholbaren QA-Notizen oder Bugreports.
Erweitert nur bei Bedarf öffnen
Im erweiterten Panel findest du visuellen Viewport, Hover- und Pointer-Fähigkeit, Farbraum, Reduced Motion, Sprache, Plattform und User Agent.
Beispiel-Anwendungsfälle
Diese Beispiele decken die häufigsten Gründe ab, warum Nutzer nach Bildschirmauflösung, Viewport-Größe oder DPR suchen.
Alltagsnutzer auf dem Smartphone
Du willst die Auflösung und den nutzbaren Viewport deines Telefons für einen Screenshot oder eine App-Einstellung kennen.
Situation
- Zuerst prüfen
- Viewport (CSS-Pixel)
- Dann vergleichen
- Ungefähre Bildschirm-Pixel
Bester nächster Schritt: Nutze Kopieren oder Teilen direkt aus der Zusammenfassung.
Der Viewport zeigt, wie Websites layouten; ungefähre Geräte-Pixel helfen bei Export- und Screenshot-Erwartungen.
Entwickler beim Responsive-Debugging
Du willst wissen, warum eine Seite in einen anderen Tailwind- oder Bootstrap-Bereich gewechselt ist.
Situation
- Zuerst prüfen
- Aktuelle Viewport-Breite
- Dann öffnen
- Breakpoints-Panel
Bester nächster Schritt: Vergleiche die aktuelle Breite mit dem Abstand zum nächsten Breakpoint.
Das ist schneller, als mehrere Framework-Breakpoints im Kopf umzusetzen.
Designer prüft Zoom und sichtbaren Raum
Du willst sehen, wie viel Platz nach Browser-Zoom oder mobilen Browser-Overlays wirklich sichtbar bleibt.
Situation
- Zuerst prüfen
- Visueller Viewport
- Dann vergleichen
- Viewport und Browser-UI-Differenz
Bester nächster Schritt: Achte auf Unterschiede zwischen Layout-Viewport und visuellem Viewport.
Dieser Unterschied erklärt oft, warum sich eine Seite enger anfühlt als die reine Bildschirmgröße vermuten lässt.
Häufig gestellte Fragen
Warum ist mein Viewport kleiner als meine Bildschirmauflösung?
Die gemeldete Bildschirmgröße beschreibt den größeren Anzeige-Kontext, während der Viewport nur den Bereich zeigt, den die aktuelle Seite im Browser wirklich nutzen kann. Browser-UI, Systemleisten, Scrollbars und Zoom können den Viewport verkleinern.
Was ist der Unterschied zwischen Bildschirm-Pixeln und CSS-Pixeln?
CSS-Pixel sind die Layout-Einheiten des Browsers für Größen und Media Queries. Geräte-Pixel sind die Hardware-Pixel des Panels. High-DPI-Displays verwenden oft mehrere Geräte-Pixel für ein CSS-Pixel.
Wie prüfe ich responsive Breakpoints am schnellsten?
Starte mit der Live-Viewport-Breite und vergleiche sie danach mit den Framework-Bereichen, die du tatsächlich verwendest. Dieses Tool zeigt Tailwind, Bootstrap und generische responsive Bereiche parallel an.
Beeinflusst Browser-Zoom die Viewport-Größe?
Ja. Zoom kann den sichtbaren Viewport und das Verhältnis zwischen Layout-Viewport und visuellem Viewport verändern. Deshalb zeigt dieses Tool beide Größen getrennt an.
Werden meine Messwerte an einen Server gesendet?
Nein. Das Tool liest browsergemeldete Werte lokal aus und hält Zusammenfassungen, Verlauf und gespeicherte Snapshots im Browser, bis du sie selbst kopierst, teilst oder exportierst.
Warum meldet mein Smartphone eine kleinere Bildschirmgröße als im Marketingmaterial?
Marketing-Spezifikationen nennen meist native Hardware-Pixel. Browser liefern oft CSS-orientierte Bildschirmwerte, die für Layout-Logik nützlicher sind. DPR erklärt dann, warum das Ergebnis trotzdem scharf gerendert wird.