Kostenlos und datenschutzfreundlich

Was ist meine Bildschirmauflösung?

Zuletzt aktualisiert:

Prüfe Bildschirm, Viewport, DPR, Zoom und responsive Breakpoints in einem mobilen Browser-Tool, das alles lokal hält.

Läuft lokal im Browser. Es werden keine Daten übertragen.

Wobei dieses Tool hilft

Wobei dieses Tool hilft

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.

Live-Diagnostik für Browser und Anzeige

Bildschirm, Viewport und DPR in Sekunden verstehen

Sieh sofort die Werte, die für Responsive Design, QA, Screenshots, Zoom-Verhalten und mobile Fehlersuche wirklich zählen: ohne Upload und ohne Seitenwechsel.

Läuft lokal Sofortige Updates Für Mobilgeräte gebaut
Live-Geräteprofil bereit Die Messwerte aktualisieren sich bei Änderungen von Viewport, Zoom oder Ausrichtung.

Live-Viewport-Snapshot

Die klarste Sicht auf deinen aktuellen Bildschirm und dein Browserfenster

Die ersten Werte zeigen dir, wie breit die Seite wirklich layouten kann, was der Browser für den Bildschirm meldet und wie DPR die effektive Pixelzahl verändert.

Viewport (CSS-Pixel)

- × - Der Layout-Bereich, der der Seite aktuell zur Verfügung steht.

Ungefähre Bildschirm-Pixel

- × - Vom Browser gemeldete Bildschirm-CSS-Pixel multipliziert mit DPR als Näherung für Hardware-Pixel.

Bildschirm vs. Viewport

Gemeldeter Bildschirm - × -
Viewport - × -
Zoom / Skalierung -

Der Viewport nutzt die Browserfenster-Fläche und nicht den vollständig gemeldeten Bildschirm.

Mehr Aktionen

Schnelle Einordnung

Was diese Werte gerade bedeuten

Dieses Panel macht den aktuellen Viewport, DPR und Browser-Overhead auch auf dem Smartphone sofort verständlich.

Einordnung und nächste Schritte

Für Entwickler

Viewport-Breite ist meist die entscheidende Zahl

Wenn ein responsives Layout bricht, starte mit der Viewport-Breite und nicht mit der Bildschirmgröße. Media Queries, Framework-Breakpoints und die meisten responsiven CSS-Entscheidungen richten sich nach dem Viewport.

Für Designer

DPR beeinflusst Schärfe, nicht automatisch die Layout-Breite

Eine höhere Device Pixel Ratio macht Text und Grafiken schärfer, bedeutet aber nicht automatisch mehr CSS-Pixel für das Layout. Deshalb musst du DPR und Viewport immer gemeinsam lesen.

Für QA

Zoom und Browser-UI verändern das sichtbare Ergebnis

Zwei Geräte mit gleicher gemeldeter Bildschirmgröße können trotzdem unterschiedliche nutzbare Seitenflächen zeigen: wegen Zoom, Browser-UI, Systemleisten und dem Unterschied zwischen Layout- und visuellem Viewport.

Nächste Tools

Im gleichen Debugging-Workflow weitermachen

Nach dem Check von Bildschirm- und Viewport-Daten helfen diese Tools bei Browser-QA, Geräteverhalten und Entwickler-Handoffs.

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.

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.

Nächster Schritt

Nächsten Schritt entdecken

Prüfe Bildschirm, Viewport, DPR, Zoom und responsive Breakpoints in einem mobilen Browser-Tool, das alles lokal hält.

Redaktionelle Prüfung

So wurde diese Seite aufgebaut

Diese Seite kombiniert den Live-Rechner, Eingabehinweise, Beispielrechnungen und typische Grenzen, damit Was ist meine Bildschirmauflösung? nicht nur schnell, sondern auch nachvollziehbar genutzt werden kann.

Zuletzt im Klartext-Tools-Review auf Basis des aktuellen Was ist meine Bildschirmauflösung?-Setups am 2026-02-24 geprüft.

Zuletzt aktualisiert:

Bitte beachten

Annahmen

  • Browser melden Bildschirmdimensionen über CSS-orientierte APIs, nicht zwingend als rohe Panel-Hardware-Pixel.
  • Ungefähre Geräte-Pixel werden aus gemeldeten Bildschirm-CSS-Pixeln × DPR abgeleitet.
  • Zoom, visueller Viewport, Browser-UI und Systemleisten können die nutzbare Seitenfläche kleiner machen als den gemeldeten Bildschirm.

Seitenüberblick

Was diese Seite abdeckt

  • So nutzt du das Tool effektiv
  • Beispiel-Anwendungsfälle
  • So liest du das Live-Ergebnis richtig
  • Einsatzfälle
  • Best Practices
  • Warum Displaymetriken für Entwicklung und QA wichtig sind

Praxisbeispiele

Alltagsnutzer auf dem Smartphone

Du willst die Auflösung und den nutzbaren Viewport deines Telefons für einen Screenshot oder eine App-Einstellung kennen.

Zuerst prüfen
Viewport (CSS-Pixel)
Dann vergleichen
Ungefähre Bildschirm-Pixel

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.

Zuerst prüfen
Aktuelle Viewport-Breite
Dann öffnen
Breakpoints-Panel

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.

Zuerst prüfen
Visueller Viewport
Dann vergleichen
Viewport und Browser-UI-Differenz

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.

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.

  1. 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.

  2. 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.

  3. Verlauf nutzen, wenn du resize, rotierst oder zoomst

    Der Verlauf zeigt aktuelle Zustände, und gespeicherte Snapshots helfen bei wiederholbaren QA-Notizen oder Bugreports.

  4. 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.

Beispielwerte

Zuerst prüfen
Viewport (CSS-Pixel)
Dann vergleichen
Ungefähre Bildschirm-Pixel

Beispielausgabe: 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.

Beispielwerte

Zuerst prüfen
Aktuelle Viewport-Breite
Dann öffnen
Breakpoints-Panel

Beispielausgabe: 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.

Beispielwerte

Zuerst prüfen
Visueller Viewport
Dann vergleichen
Viewport und Browser-UI-Differenz

Beispielausgabe: 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.

So liest du Bildschirmauflösung, Viewport-Größe und DPR korrekt

Bildschirmauflösung, Viewport-Größe und Device Pixel Ratio werden oft verwechselt, weil Browser alle drei Werte unterschiedlich exponieren. Die Definitionen unten trennen diese Begriffe sauber, damit du bessere Entscheidungen für Responsive Design, QA und Gestaltung triffst.

Die gemeldete Bildschirmgröße ist nicht immer die rohe Panel-Auflösung

Browser liefern Bildschirmbreite und -höhe meist in CSS-orientierten Werten. Das ist nützlich, aber nicht immer identisch mit dem nativen Hardware-Pixelraster des Panels.

Die Viewport-Größe steuert das responsive Layout

Die Viewport-Größe ist der Bereich, den die Seite tatsächlich für ihr Layout nutzen kann. Deshalb ist sie beim Debugging von Breakpoints und Media Queries oft wichtiger als die rohe Bildschirmgröße.

DPR erklärt, warum dasselbe Layout trotzdem schärfer aussehen kann

Eine Device Pixel Ratio von 2 oder 3 bedeutet, dass mehrere Hardware-Pixel für ein CSS-Pixel verwendet werden. Die Layout-Breite kann gleich bleiben, während das Ergebnis schärfer gerendert wird.

Warum sich Bildschirmgröße und Viewport unterscheiden

Der gemeldete Bildschirm beschreibt den größeren Anzeige-Kontext, während der Viewport Browser-UI, Systemleisten, Scrollbars und andere Elemente ausschließt, die Platz vom eigentlichen Seitenlayout wegnehmen.

Warum Zoom das sichtbare Ergebnis verändert

Beim Zoomen bekommt die Seite nicht plötzlich mehr CSS-Pixel. Stattdessen verändert der Browser das Verhältnis zwischen Layout-Viewport und sichtbarem Viewport, was den tatsächlich sichtbaren Bereich verkleinern kann.

Warum Breakpoint-Erkennung Zeit spart

Eine Viewport-Breite von 390 px ist hilfreich. Noch hilfreicher ist zu wissen, dass dieselbe Breite in Tailwind base, Bootstrap xs und einen telefonartigen Layout-Bereich fällt.

Einsatzfälle

  • Messen Sie Tippgeschwindigkeit, Reaktionszeit und Hardware-Eingaben direkt im Browser.
  • Prüfen Sie Bildschirm-, Viewport- und DPR-Metriken ohne Installation.
  • Vergleichen Sie wiederholbare Benchmarks für QA, Support, Gaming und Lern-Workflows.

Im gleichen Debugging-Workflow weitermachen

Leitfäden

Leitfäden durchsuchen

Entscheidungsseiten

Lernbibliothek ansehen

Tools und Themen

  • Browser-Tests & Diagnostik

    Browserbasierte Tests für Schreibgeschwindigkeit, Reaktionszeit, Tastatureingaben, Bildschirmmetriken und schnelle Geräte-Diagnosen.

  • Tastatur-Tester

    Prüfe Tasten-Erkennung, Ghosting und Eingabeverhalten, wenn du Geräte- oder Browser-Umgebungen validierst.

  • Reaktionszeit-Test

    Miss Reaktionsmuster, wenn du einen schnellen browserbasierten Performance-Sanity-Check brauchst.

  • JSON-Formatierer & Validator

    Bereinige und prüfe Payloads, wenn deine Viewport-Debugging-Arbeit auch API-Antworten und Browserdaten umfasst.

Geprüft von Klartext Tools

  • Mit dem Klartext-Tools-Reviewprozess für praktische Browser-Workflows geprüft.
  • Annahmen und Grenzen stehen direkt auf der Seite vor den Entscheidungshilfen.
  • Beispiele und FAQ sind enthalten, damit das Ergebnis gegen ein zweites Szenario geprüft werden kann.

Häufig gestellte Fragen

Diese Antworten decken die wichtigsten Suchintentionen rund um Bildschirmauflösung, Viewport-Größe, Device Pixel Ratio und responsive Breakpoints ab.

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.
Was zeigt Was ist meine Bildschirmauflösung? genauer als ein einfacher was ist meine bildschirmauflösung online?
Was ist meine Bildschirmauflösung? ist auf einen klar begrenzten Anwendungsfall ausgelegt: Prüfe Bildschirm, Viewport, DPR, Zoom und responsive Breakpoints in einem mobilen Browser-Tool, das alles lokal hält. Das Tool liefert dafür klare, reproduzierbare Ergebnisse direkt im Browser.
Welche Eingaben beeinflussen das Ergebnis am stärksten?
Beginnen Sie mit die Eingabefelder. Schon kleine Änderungen an diesen Feldern verschieben das Ergebnis oft deutlich, deshalb lohnt sich mindestens ein zweites Vergleichsszenario.

Kategorie-übergreifende Empfehlungen

Wenn das Problem über diese Kategorie hinausgeht, helfen diese Tools aus anderen Bereichen beim nächsten Schritt.