01 · Pixelabstand
Unterschied zwischen physischem PPI und CSS-Pixeln?
Hardware-PPI folgt √(B² + H²) / Diagonale. CSS-Pixel entsprechen 1/96 CSS-Zoll. Bei HiDPI-Skalierung speichert Online Ruler Plus devicePxPerMm = pxPerMm × dpr zoom-invariant.
Technische Referenz · Display-Optik & W3C CSS · November 2026
Kompletter Bildschirm-Kalibrierungs- & PPI-Guide
Die Kalibrierung verbindet abstrakte 96-PPI-CSS-Pixel mit dem realen physischen Pixelabstand deines Panels.
02 · Physische Norm
Warum eignet sich ISO/IEC 7810 ID-1 ideal?
Jede genormte Bankkarte misst 85,60 × 53,98 mm. Der Abgleich misst direkt pxPerMm = cardWidthPx / 85.60 unabhängig von versteckter OS-Skalierung.
04 · Prüfobjekte
Welche Münzen & Formate bestätigen die Kalibrierung?
1 Euro: 23,25 mm; 2 Euro: 25,75 mm; US Penny: 19,05 mm; US Quarter: 24,26 mm; AA-Batterie: 50,50 mm; DIN A4 kurz: 210,0 mm.
05 · Zoom & Multi-Monitor
Wie reagiert das Tool auf Zoom und Monitorwechsel?
devicePxPerMm wird pro Display-Signatur in localStorage gespeichert; Zoom wird automatisch umgerechnet, ein Monitorwechsel per Banner gemeldet.
06 · Rechenbeispiele & HiDPI-Matrix
Zusammenhang von CSS PPI, Hardware-PPI und devicePxPerMm
Pythagoras über CSS-Pixel bei 100 % Zoom liefert CSS px/mm; multipliziert mit window.devicePixelRatio ergibt sich devicePxPerMm.
Dichte-Tabelle nach Display & OS-Skalierung
| Display-Konfiguration | CSS-Auflösung | Effektive CSS PPI | CSS px/mm | devicePxPerMm |
|---|---|---|---|---|
| 14.2" Laptop (Mac Retina / 2× DPR) | 1512 × 982 CSS px (DPR 2.0) | 127.0 CSS PPI | 5.000 CSS px/mm | 10.000 device px/mm |
| 15.6" Windows-Laptop (125 %) | 1536 × 864 CSS px (DPR 1.25) | 113.0 CSS PPI | 4.448 CSS px/mm | 5.560 device px/mm |
| 24" 1080p-Monitor (100 %) | 1920 × 1080 CSS px (DPR 1.0) | 91.8 CSS PPI | 3.614 CSS px/mm | 3.614 device px/mm |
| 27" 4K-Monitor (150 %) | 2560 × 1440 CSS px (DPR 1.5) | 108.8 CSS PPI | 4.283 CSS px/mm | 6.425 device px/mm |
| 6.1" OLED-Smartphone (3× DPR) | 390 × 844 CSS px (DPR 3.0) | 152.4 CSS PPI | 6.000 CSS px/mm | 18.000 device px/mm |
Fraktionale OS-Skalierung
Warum Kartenkalibrierung der Diagonalschätzung überlegen ist
Skalierungsstufen wie 125 %, 150 % oder macOS-Skalierungen verändern das effektive CSS PPI. Die physische 85,60-mm-Karte misst exakt den realen Output.
Schmale Handys
Warum Smartphones auf Hochformat-Karte (53,98 mm) umschalten
Bei 360–430 px Breite passt 85,60 mm quer nicht ins Bild. Der Hochformat-Modus kalibriert über die 53,98 mm-Kante.
Windows 125%/150% & Android Chrome
Windows-Skalierung & Android-Smartphones kalibrieren
Bei Windows 10/11 mit 125%/150% ClearType-Skalierung oder Android Chrome (~360–412 CSS-px) weicht die CSS-Dichte vom Glas ab. Browser-Zoom bei 100% halten, auf Android Hochformat-Kartenmodus (53.98 mm) nutzen und mit einer Bankkarte abgleichen.
07 · Display-Physik & Toleranzen
Deckglas-Parallaxe und praktische Genauigkeitsgrenzen
Schutzglas (0,5–1,5 mm, n ≈ 1.5) verschiebt bei Blickwinkel θ um Dicke × sin(θ) / n — bei 30° rund 0,3–0,5 mm.
Stets exakt senkrecht (90°) ablesen und unter ±0,25 mm Toleranz Messschieber oder Mikrometer verwenden.
Referenztabelle genormter Prüfobjekte
Lege einen dieser Gegenstände leicht ans Display, um deine Kalibrierung zu prüfen:
| Referenzobjekt | Metrisch (mm) | Imperial (in) | Geltende Norm |
|---|---|---|---|
| ISO/IEC 7810 ID-1 Bankkarte (Breite) | 85.60 mm | 3.370 in | ISO/IEC 7810:2019 ID-1 |
| ISO/IEC 7810 ID-1 Karte (Höhe) | 53.98 mm | 2.125 in | ISO/IEC 7810:2019 ID-1 |
| US 1-Cent-Penny (Durchmesser) | 19.05 mm | 0.750 in (3/4″) | US Mint |
| US 5-Cent-Nickel (Durchmesser) | 21.21 mm | 0.835 in | US Mint |
| 1-Euro-Münze (Durchmesser) | 23.25 mm | 0.915 in | Europäische Zentralbank |
| US Quarter Dollar (Durchmesser) | 24.26 mm | 0.955 in | US Mint |
| 2-Euro-Münze (Durchmesser) | 25.75 mm | 1.014 in | Europäische Zentralbank |
| Standard AA-Batterie (Länge) | 50.50 mm | 1.988 in | IEC R6 / ANSI 15 |
| US-Dollar-Banknote (Breite) | 155.96 mm | 6.140 in | Bureau of Engraving & Printing |
| DIN A4 Papier (Kurze Kante) | 210.00 mm | 8.268 in | ISO 216 Reihe |
Kalibrierungs-Bauplan
Maßstabsgetreue Kalibrierung Schritt für Schritt
Warum 96-PPI-Standardwerte abweichen und wie eine einzelne Karte exakte physische Maße sichert.
Interaktive Bewegungsanleitung
Alle Messabläufe Direkt in Bewegung Erleben
Animation läuft
Physische ISO/IEC 7810 ID-1 Bankkarte an (0, 0) ausrichten und den blauen Rahmen bündig ziehen.
85.60 × 53.98 mmZentimeter-Hauptstriche teilen sich sauber in 5-mm-Halbschritte und feine 1-mm-Teilstriche auf.
1 cm = 10 mmKalibrierung per Karte & Eigener Referenz
ABB. 02 · KALIBRIERUNG
Bildschirm-DPI/PPI & Physische Präzision
ABB. 09 · DISPLAY-PHYSIK