Bildschirmauflösung Prüfen
Viewport, Verhältnis Und Pixeldichte

Was Ein Werkzeug Für Die Bildschirmauflösung Für Sie Tut

Die Zahlen zum Bildschirm verstecken sich an drei verschiedenen Stellen. Ihr System kennt eine Größe, das Browserfenster kennt eine andere, und Ihre Seite sieht eine dritte. Deshalb stellt dieses Werkzeug alle drei nebeneinander, und dann ergeben die Abstände dazwischen endlich Sinn.

Es gibt nichts einzurichten. Weil die Seite jeden Wert schon beim Laden liest, stehen Ihre Bildschirmgröße, Ihr Viewport und Ihr Pixelverhältnis auf dem Schirm, bevor Sie etwas anfassen.

Vier Felder teilen eine Seite. Dadurch wechseln Sie von der einfachen Bildschirmgröße zum Seitenverhältnis, zur Pixeldichte und zur Bildwiederholrate, ohne den Tab zu verlassen.

Alles läuft in Ihrem Browser. Keiner dieser Messwerte erreicht also diese Seite, und wir speichern nichts.

So Prüft Das Werkzeug Die Bildschirmauflösung

Zuerst fragt das Werkzeug Ihren Browser nach dem screen-Objekt. Dann misst es das Fenster selbst. Anschließend teilt es eines durch das andere, deshalb fallen Pixelverhältnis und native Pixelzahl aus denselben zwei Messwerten heraus.

Das Werkzeug rät nichts. Weil jede Zeile aus einer dokumentierten Browser-Eigenschaft kommt, können Sie jede davon selbst in einer Konsole nachprüfen.

Wie Lautet Meine Bildschirmauflösung?

Das Zahlenpaar in der Überschrift ist der Grund, aus dem die meisten kommen. Oben auf der Seite stehen deshalb Breite und Höhe Ihres Bildschirms, geschrieben wie in einem Datenblatt, etwa 1920 mal 1080.

Dieses Paar kommt aus dem screen-Objekt, das Ihr Browser bereitstellt. Weil der Browser in CSS-Pixeln zählt, zeigt ein Notebook mit scharfem Panel oft eine kleinere Zahl als die auf der Verpackung.

CSS-Pixel Und Native Pixel

In jeder modernen Anzeige leben zwei Pixelzahlen. Das CSS-Pixel ist die Einheit, in der Ihr Stylesheet spricht, während das native Pixel ein echter Punkt im Panel ist.

Das Werkzeug multipliziert deshalb die CSS-Größe mit dem Pixelverhältnis und schreibt dann die native Größe darunter. Ein Bildschirm mit 1512 mal 982 bei einem Verhältnis von zwei hat zum Beispiel wirklich 3024 mal 1964 Punkte. Die MDN-Seite zu window.devicePixelRatio beschreibt die Regel, der Browser folgen.

Die Verfügbare Bildschirmfläche

Ihr Bildschirm gehört nicht ganz Ihnen. Weil eine Taskleiste, ein Dock oder eine Menüleiste einen Streifen behält, meldet der Browser außerdem eine verfügbare Breite und Höhe.

Das Werkzeug zeigt beide Paare, der Unterschied sagt Ihnen also, wie viel Mobiliar Ihr Desktop zurückhält. Auf einem Handy stimmen die zwei Paare meist überein, während sie auf einem Desktop selten gleich sind.

Farbtiefe Und Ausrichtung

Zwei kleinere Messwerte sitzen im selben Feld. Die Farbtiefe zählt die Bits je Pixel, und fast jede Anzeige antwortet heute mit vierundzwanzig.

Die Ausrichtung sagt, ob Sie im Hochformat oder im Querformat sitzen, und nennt außerdem den Winkel. Ein Tablet, das Sie drehen, aktualisiert deshalb beide Zeilen gleichzeitig, wie die MDN-Seite zu screen.orientation beschreibt.

Ein Viewport-Messer In Derselben Seite

Der Viewport ist der Teil des Fensters, in dem Ihre Seite wirklich zeichnen darf. Das zweite Feld misst ihn deshalb direkt und hält diesen Wert dann gegen die Bildschirmgröße darüber.

Hier erscheinen zwei Messwerte. Das Fenster gibt eine Breite, während das Dokumentelement eine andere gibt, und jeder Abstand dazwischen ist der Scrollbalken.

Manchmal ist dieser Abstand null. Weil ein Browser mit überlagerten Scrollbalken die Leiste über die Seite legt, statt Platz für sie zu reservieren, meldet das Feld dann null Pixel, und die Aufnahme darunter zeigt genau diesen Fall.

Warum Der Viewport Kleiner Als Der Bildschirm Ist

Das Mobiliar des Browsers frisst den Rest. Weil die Tableiste, die Adresszeile und die Lesezeichenzeile alle über Ihrer Seite sitzen, verliert der Viewport hundert Pixel Höhe oder mehr.

Der Breite geht es genauso, sobald ein Scrollbalken erscheint. Ein maximiertes Fenster auf einem 1920 Pixel breiten Bildschirm meldet deshalb oft 1905 für das Dokument, und diese fehlenden 15 sind die Leiste selbst. Die Regeln hinter beiden Messwerten stehen im CSSOM-View-Modul des W3C.

In Welchem Breakpoint Sie Sind

Die meisten Seiten wechseln ihr Layout bei einigen festen Breiten. Das Werkzeug benennt deshalb das Band, in dem Sie gerade sitzen, vom schmalen Handy über ein Tablet bis zum breiten Desktop.

Ändern Sie die Fenstergröße, dann folgt Ihnen die Beschriftung. So sehen Sie genau, wo ein Entwurf umklappt, ohne ein einziges Entwicklerwerkzeug zu öffnen.

Der Visuelle Viewport Auf Einem Handy

Ein Handy legt noch eine Schicht darauf. Wenn die Tastatur aufgeht oder Sie mit den Fingern zoomen, schrumpft der sichtbare Teil, obwohl das Layout seine Größe behält.

Das Werkzeug meldet diesen sichtbaren Kasten und daneben den Zoomfaktor. Die Einzelheiten stehen auf der MDN-Seite zur VisualViewport-API.

Seitenverhältnis Und Pixeldichte

Das dritte Feld verwandelt Ihre zwei Größen in Formen. Zuerst kürzt es die Bildschirmgröße zu einem Verhältnis, und dann berechnet es, wie eng die Pixel beieinander sitzen.

Beide Werte helfen, wenn Sie ein Bild oder ein Video wählen. Ein 16:9-Banner passt zum Beispiel genau auf einen Bildschirm mit 1920 mal 1080, während ein 16:10-Notebook einen Streifen übrig lässt.

So Kürzt Das Werkzeug Das Seitenverhältnis

Ein Verhältnis ist nur ein Bruch in kleinsten Zahlen. Das Werkzeug teilt deshalb beide Seiten durch ihren größten gemeinsamen Teiler, und aus 1920 mal 1080 wird 16:9.

Manche Größen landen nie auf einem saubereren Paar. Aus 1366 mal 768 wird zum Beispiel 683:384, deshalb nennt das Werkzeug daneben auch das nächstgelegene gängige Verhältnis.

PPI Brauchen Die Diagonale Ihres Monitors

Pixel pro Zoll können nicht aus dem Browser kommen. Weil keine Webseite ein Panel fragen darf, wie groß es in Zoll ausfällt, bleibt der Wert leer, bis Sie die Diagonale selbst eingeben.

Geben Sie 27 für einen 27-Zoll-Monitor ein, dann macht das Werkzeug den Rest. Es teilt dann die native Diagonale in Pixeln durch Ihr Maß, ein Panel mit 3840 mal 2160 bei 27 Zoll landet also bei etwa 163 PPI.

Bildwiederholrate Und Fähigkeiten Der Anzeige

Das vierte Feld fragt, was Ihre Anzeige kann. Es tastet deshalb die Bildwiederholrate ab und prüft dann die Farb- und Kontrastmerkmale, zu denen sich Ihr Browser bekennt.

Jede Zeile hier enthält eine Antwort des Browsers, keine Abfrage der Hardware. Das Feld bleibt deshalb ehrlich bei diesem Unterschied.

Die Bildwiederholrate Ist Eine Schätzung

Kein Browser gibt die Bildwiederholrate direkt heraus. Stattdessen zählt das Werkzeug etwa eine Sekunde lang Animationsbilder und rundet die Zahl dann auf die nächste gängige Rate.

Behandeln Sie die Antwort deshalb als nah und nicht als genau. Weil ein beschäftigter Tab oder ein Akkusparmodus Bilder verliert, meldet ein 120-Hz-Panel manchmal 60, während es bremst. Der Bildaufruf hinter der Zählung steht auf der MDN-Seite zu requestAnimationFrame.

Farbraum Und Dynamikumfang

Zwei Media Queries beantworten die Farbfrage. Eine fragt, ob Ihre Anzeige den weiteren P3-Raum abdeckt, während die andere nach hohem Dynamikumfang fragt.

Ein Ja bedeutet hier, dass Ihr Browser diese Fähigkeit behauptet. Nehmen Sie es deshalb als Hinweis für eine CSS-Entscheidung, wie die MDN-Referenz zu color-gamut vorschlägt, und nicht als Kalibrierungsbericht.

Hinweise Zu Kontrast, Bewegung Und Zeiger

Dasselbe Feld liest die Vorlieben, die Sie in Ihrem System behalten. Dunkelmodus, reduzierte Bewegung, höherer Kontrast und erzwungene Farben erhalten jeweils eine Zeile.

Zeiger und Hover runden es ab, ein Touchscreen und eine Maus sehen also sofort verschieden aus. Alle diese Queries stehen in der Spezifikation Media Queries Level 5 des W3C.

Was Dieses Werkzeug Über Die Bildschirmauflösung Nicht Sagen Kann

Ein ehrliches Werkzeug benennt seine Grenzen. Hier stehen deshalb die Zeilen, die diese Seite nie schreiben wird, so oft Sie sie auch neu laden.

Ihr Monitormodell bleibt unbekannt, und die Marke Ihrer Grafikkarte ebenso. Physische Zoll brauchen Ihr eigenes Maß, während die Bildwiederholrate eine Stichprobe bleibt und keine Abfrage am Panel.

Kopieren Sie Den Ganzen Bericht

Eine Schaltfläche nimmt alles mit. Drücken Sie also auf Bericht kopieren, dann landet jedes Feld als einfache Liste aus Beschriftungen und Werten in Ihrer Zwischenablage.

Diese Liste fügt sich direkt in ein Fehlerticket ein. Ein Tester kann deshalb genau sagen, welcher Bildschirm, welcher Viewport und welches Verhältnis ein Layoutproblem erzeugt haben.

Sicher Von Anfang An

Das Werkzeug arbeitet in Ihrem Browser. Es sendet nichts, und es speichert nichts. Die Größen, die es liest, die Diagonale, die Sie eingeben, und der Bericht, den Sie kopieren, bleiben deshalb auf Ihrem eigenen Gerät.