Anleitung

1. Klicken und ziehen Sie auf dem Lineal, um den Abstand zu messen. Das Lineal zeigt Pixelschritte an.
2. Die Start- und Endpunkte sind verschiebbar, packen Sie sie, um Ihre Messung anzupassen.
3. Schalten Sie den vertikalen Modus ein, um vertikale Abstände statt horizontale zu messen.
4. Sehen Sie Ihre Pixelanzahl und die geschätzte physische Größe unter dem Lineal.

Häufig gestellte Fragen

Wie genau ist die Berechnung der physischen Größe?

Die physische Größe basiert auf dem Pixelverhältnis Ihres Geräts und einer angenommenen DPI von 96. Die tatsächliche Monitor-DPI variiert, daher ist dies eine Annäherung. Für präzise Messungen auf Druckmaterialien verwenden Sie ein physisches Lineal.

Kann ich vertikale Abstände messen?

Ja. Aktivieren Sie den vertikalen Modus, um vertikale Pixelabstände statt horizontale zu messen.

Was bedeutet Device Pixel Ratio?

High-DPI-Bildschirme (wie Retina-Displays) haben ein Pixelverhältnis größer als 1, das heißt, mehrere physische Pixel stellen ein CSS-Pixel dar. Dieses Tool misst CSS-Pixel.

Was dieses Lineal misst (und was nicht)

Dies ist ein frei beweglicher Messstab, der in Ihrem Browser-Tab lebt. Ziehen Sie über die Zeichenfläche oben, um einen CSS-Pixel-Wert abzulesen. Es funktioniert mit allem, was innerhalb des Browser-Viewports gezeichnet wird (ein in einem Tab geöffneter Screenshot, ein inline betrachteter Figma-Export, eine Live-Webseite in einem zweiten Tab), aber es kann keine Desktop-Fenster, keine Oberfläche nativer Apps, keine Taskleiste und nichts messen, was vom Compositor auf Betriebssystemebene außerhalb des Browsers gezeichnet wird. Es kann außerdem keine Elementgrenzen automatisch erkennen, wie es die Chrome DevTools oder Page Ruler Redux können. Das ist ein anderes Werkzeug. Ehrliche Einordnung ist wichtig: Dieses Lineal ist die richtige Wahl, wenn Sie eine schnelle, installationsfreie Messung innerhalb des Browsers möchten.

CSS-Pixel sind keine Hardware-Punkte

Das Pixel, das JavaScript und CSS verwenden, ist ein vom W3C definiertes Referenzpixel: „der Sehwinkel eines Pixels auf einem Gerät mit einer Gerätepixeldichte von 96 dpi und einem Leseabstand von einer Armlänge.“ Bei einer nominalen Armlänge von etwa 28 Zoll beträgt dieser Sehwinkel rund 0,0213°, also etwa 0,26 mm auf der Bildschirmoberfläche. Das CSS-Pixel ist eine Einheit des Sehwinkels, kein Hardware-Punkt, bewusst geräteunabhängig, damit eine 16-px-Schrift auf einem Smartphone, einem Laptop und einem Fernseher ungefähr gleich groß erscheint.

Alle anderen absoluten CSS-Längen sind daran verankert: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. Genau diese feste Umrechnungstabelle macht den Wert „mm bei 96 DPI“ zu einer Schätzung statt einer echten Messung, siehe unten.

Drei Pixel-Begriffe, die Designer verwechseln

Begriff	Was er zählt	Wo er vorkommt
CSS-Pixel	Das W3C-Referenzpixel; die Einheit, die JS und CSS für das Layout verwenden	window.innerWidth, getBoundingClientRect(), jede CSS-Länge
Gerätepixel	Der tatsächlich adressierbare Punkt auf dem Panel	screen.width × devicePixelRatio, native Auflösung des Monitors
Bildpixel	Die intrinsische Auflösung einer Rasterdatei	naturalWidth / naturalHeight bei einem <img>

Der Zusammenhang in einem Satz: physische Bildschirmauflösung ≈ CSS-Viewport-Größe × Gerätepixelverhältnis, und ein scharfes Bild benötigt eine intrinsische Breite ≥ gerenderte CSS-Breite × DPR. Ein Logo mit einer CSS-Größe von 100 px auf einem Smartphone mit DPR 3 benötigt ein mindestens 300 Pixel breites Quellbild, um knackig scharf zu wirken.

Gerätepixelverhältnis

Der DPR-Wert im Info-Panel gibt window.devicePixelRatio wieder: „das Verhältnis der Auflösung in physischen Pixeln zur Auflösung in CSS-Pixeln für das aktuelle Anzeigegerät.“ Gängige Werte:

• 1,0: klassische 96-DPI-Displays (ältere Monitore, Windows-Rechner bei 100 % Skalierung).
• 2,0: die meisten Retina-MacBooks, viele 4K-Monitore bei 200 % Skalierung.
• 2,5 bis 3,5: moderne Smartphones. iPhone-Pro-Modelle melden 3,0; Android-Flaggschiffe liegen oft bei 2,625 / 2,75 / 3,5.

Zwei Verhaltensweisen, die man kennen sollte: Seiten-Zoom (Strg/Cmd + und −) verändert das DPR, sodass der Wert beim Zoomen springt. Pinch-Zoom vergrößert den gerenderten Viewport, ohne die zugrunde liegende CSS-Pixelgröße zu ändern, also tut er das nicht. Apple führte das Retina-Display 2010 mit dem iPhone 4 ein, und um zu verhindern, dass bestehende Apps und Seiten auf ein Viertel ihrer bisherigen Größe schrumpfen, als sich die Gerätepixel in beiden Dimensionen verdoppelten, führte iOS „Points“ ein (sein CSS-Pixel-Äquivalent). Das Web übernahm dasselbe Modell: Ein 2×-CSS-Pixel entspricht vier Gerätepixeln.

Standards für die Größe von Tap-Zielen

Eine der nützlichsten Aufgaben eines Pixel-Lineals ist die Überprüfung, ob Schaltflächen, Links und Symbole die Mindestgrößen für barrierefreie Tap-Ziele erfüllen. Drei Standards tauchen meist gemeinsam auf:

Quelle	Minimum	Einheit	~Physisch (96 DPI)
WCAG 2.2 SC 2.5.8 AA	24 × 24	CSS px	~6,4 × 6,4 mm
WCAG 2.5.5 AAA	44 × 44	CSS px	~11,6 × 11,6 mm
Apple HIG	44 × 44	pt	~11,6 × 11,6 mm
Material Design / Android	48 × 48	dp	~9 mm (Referenz 160 dpi)

WCAG 2.2 fügte das Kriterium 24 × 24 AA im Oktober 2023 hinzu. Der W3C-Konformitätstest formuliert es so: „Es muss konzeptionell möglich sein, ein volles Quadrat von 24 mal 24 CSS-Pixeln… vollständig innerhalb des Ziels zu zeichnen.“ Es gibt fünf Ausnahmen (Abstand, Äquivalent, Inline, User-Agent-Steuerelement, wesentlich), aber im Allgemeinen muss die normale Bedienoberfläche diese Hürde nehmen. Das ältere AAA-Kriterium (2.5.5) verlangt 44 × 44, passend zu Apples HIG und ungefähr passend zu Materials 48 dp.

Das 8-Pixel-Designraster

Die meisten modernen UI-Designs beruhen auf einer 8-Pixel-Basiseinheit (dem „8-Punkt-Raster“ oder „8-dp-Raster“, je nach Plattform). Material Design 2 und 3 bauen beide darauf auf, mit kleineren 4-dp-Anpassungen für Symbole und dichte Komponenten. Die Wahl von 8 ist kein Zufall: Sie teilt sich sauber in gängige Bildschirmbreiten (320, 360, 375, 1280, 1440), sie skaliert in ganzzahligen Verhältnissen (8, 16, 24, 32, 40, 48) und sie passt natürlich zur Standard-Fließtextgröße von 16 px. Ein 4-Pixel-Unterraster sorgt für die Feinausrichtung.

Praktischer Nutzen: Wenn Sie einen Abstand als 14 px oder 17 px messen, haben Sie wahrscheinlich einen CSS-Einheitenfehler entdeckt. Der beabsichtigte Wert war mit ziemlicher Sicherheit 16. Das Pixel-Lineal ist der schnellste Weg, um rasterfremde Abstände aufzuspüren.

Wann Sie zu einem Browser-Lineal greifen

• Design-QA auf einer ausgelieferten Seite. Vergleichen Sie das Live-Ergebnis mit der Spezifikation. Beträgt der Abstand zwischen zwei Karten 16 px oder 24 px?
• Überprüfung von Tap-Zielen. Legen Sie das Lineal über eine Schaltfläche, um zu bestätigen, dass sie die AA-Untergrenze von 24 px oder das AAA-Ziel von 44 px erfüllt.
• Abstandsprüfung auf einem eingefügten Mockup. Öffnen Sie einen Figma-Export in einem Tab, legen Sie das Lineal darüber und prüfen Sie den Rhythmus.
• Plausibilitätsprüfungen für Responsive-Breakpoints. Der Viewport-Breite-Wert dient zugleich als Live-Breakpoint-Anzeige, während Sie das Fenster in der Größe verändern.
• Lehre. Zeigen Sie einem Nachwuchsentwickler, was devicePixelRatio auf seinem eigenen Rechner meldet und wie es sich ändert, wenn er zum Zoomen Cmd/Strg + drückt.
• Barrierefreiheits-Audits. Überprüfen Sie die Trefferflächen von Symbol-Schaltflächen, die Zeilenlänge in CSS-Pixeln und die Mindesttextgrößen.

Browser-DevTools und andere Lineale

Jeder moderne Browser bringt Messwerkzeuge mit, aber sie sind hinter den Entwickler-Panels verborgen.

• Chrome DevTools: Öffnen Sie das Befehlsmenü (Cmd/Strg+Umschalt+P), geben Sie „rulers“ ein und wählen Sie Lineale beim Hover anzeigen. Die Lineale erscheinen am oberen und linken Rand des Viewports, wenn Sie über ein Element fahren. An die Elementauswahl gebunden statt an freies Ziehen.
• Firefox DevTools: Einstellungen → Verfügbare Toolbox-Schaltflächen → Lineale für die Seite ein-/ausblenden aktivieren. In der DevTools-Symbolleiste erscheint eine Schaltfläche zum Umschalten der Lineale; die Lineale legen sich über die Seitenränder, mit den Viewport-Abmessungen oben rechts.
• Figma / Sketch / Adobe XD: Alle haben Lineal-Overlays innerhalb ihrer Zeichenfläche. Figma schaltet sie mit Umschalt+R um. Diese sind dateigebunden: Sie messen innerhalb ihres eigenen Dokumentmodells, nicht auf einer bereitgestellten Webseite.
• Browser-Erweiterungen: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. Alle erfordern Installation und Berechtigungen; alle bleiben auf den Browser beschränkt. Nützlich, wenn Sie eine automatische Elementerkennung benötigen.

Ein Browser-Tab-Lineal wie dieses ist die Antwort für Designer, QA-Prüfer und Content-Leute, die einen einzigen Klick statt DevTools-Panels oder Erweiterungsinstallationen möchten.

Weitere Fragen

Wie genau ist der Millimeter-Wert?

Es ist eine Schätzung. Die Umrechnung verwendet die vom W3C festgelegte Beziehung 1 in = 96 CSS px und ist nur dann genau, wenn Ihr Monitor wirklich 96 DPI hat, der Browser-Zoom bei 100 % liegt und die Betriebssystem-Skalierung 100 % beträgt. Tatsächliche Monitore variieren stark: Ein 24-Zoll-1080p-Panel kommt auf etwa 92 ppi, ein 27-Zoll-1440p auf rund 109 ppi, ein 27-Zoll-4K auf rund 163 ppi. Behandeln Sie die Millimeterzahl als Schätzung der Größenordnung, niemals als druckreife Messung. Für echte physische Größen halten Sie ein physisches Lineal an den Bildschirm.

Warum ändert sich das Gerätepixelverhältnis, wenn ich zoome?

Seiten-Zoom (Cmd/Strg + oder −) ändert buchstäblich die Größe eines CSS-Pixels relativ zum Gerätepixel, sodass sich das Verhältnis zwischen beiden verschiebt. Pinch-Zoom auf Touch-Geräten funktioniert anders. Er vergrößert den gerenderten Viewport, ohne die zugrunde liegende CSS-Pixelgröße zu ändern, also bewegt er das DPR nicht.

Warum ist 1366 × 768 nicht genau 16:9?

Weil es das eben nicht ganz ist. 1366 ÷ 768 = 1.7786; echtes 16:9 ist 1.7778. Das gekürzte Verhältnis lautet tatsächlich 683:384. Viele günstige Laptop-Panels verwenden diese leicht von der Norm abweichende Auflösung, was einer der Gründe ist, warum 1080p-Video auf ihnen manchmal unsauber herunterskaliert wird.

Kann ich außerhalb des Browsers messen?

Nein. Eine Webseite kann nur innerhalb ihres eigenen Browser-Tabs sehen und zeichnen. Um Desktop-Fenster, die Oberfläche nativer Apps oder irgendetwas anderes außerhalb des Browsers zu messen, benötigen Sie ein Dienstprogramm auf Betriebssystemebene: „Informationen einblenden“ in der macOS-Vorschau, das Windows-Snipping-Tool mit der Abmessungs-Überlagerung oder ein Bildschirmlineal eines Drittanbieters.

Werden Daten an einen Server gesendet?

Nein. Das Lineal wird mit der HTML5-Canvas-API gezeichnet; die Viewport-Abmessungen und das DPR stammen lokal aus JavaScript; der Messwert wird in Ihrem Browser berechnet. Die Seite funktioniert offline, sobald sie geladen ist.

Verwandte Tools