Wie berechnet Convertitive das Seitenverhältnis?

Zu gegebenen Pixelmaßen B × H berechnen wir ggT(B, H) mit dem euklidischen Algorithmus (Euklids Elemente, Buch VII, ca. 300 v. Chr.) und geben B/ggT : H/ggT als gekürztes Verhältnis zurück. Beispiel: 1920 × 1080: ggT(1920, 1080) = 120, also ist das Verhältnis 16:9. Nicht-ganzzahlige Verhältnisse (z. B. 2,35:1 anamorphes Kino) werden als Dezimalwert angezeigt, wenn innerhalb einer Toleranz von 0,01 keine Kürzung auf kleine ganze Zahlen existiert.

Welche Formel verwendet der DPI-/PPI-Rechner?

PPI = √(B² + H²) / Diagonale_Zoll, wobei B und H die Pixelzahlen und Diagonale_Zoll die physische Bildschirmdiagonale sind. Dies ist die Standardformel für die diagonale Pixeldichte. Hinweis: PPI ist technisch nur dann Pixel pro Zoll entlang einer beliebigen Achse, wenn die Pixel quadratisch sind — nicht-quadratische Pixel (üblich in Broadcast-Video, z. B. DVBs 720 × 576 mit 16:9-Bildseitenverhältnis) erfordern separate horizontale und vertikale PPI-Werte.

Was ist der Unterschied zwischen DPI und PPI?

DPI (dots per inch) bezieht sich auf die Druckerausgabeauflösung — wie viele Tintenpunkte ein Drucker pro linearem Zoll setzt. PPI (pixels per inch) bezieht sich auf die Bildschirm-Pixeldichte. Die beiden sind numerisch austauschbar, wenn man die Bildauflösungs-Metadaten für den Druck festlegt, beschreiben aber physisch unterschiedliche Größen. CSS verwendet „dpi“ als Media-Query-Einheit (CSS Values Level 4), wobei 1dppx per Definition 96dpi entspricht.

Wie genau ist die DPI-Berechnung?

Die Formel ist bei genauen Eingaben mathematisch exakt. Die wichtigste Fehlerquelle ist die Messung der physischen Diagonale: vom Hersteller angegebene Diagonalwerte werden auf 0,1 Zoll gerundet, was eine Unsicherheit von ±0,05 Zoll einführt. Für ein 15,6-Zoll-Display mit 1920 × 1080 ergibt das PPI = 141,2 ± 0,5. Die Geräte-Voreinstellungen in unserem Rechner verwenden die vom Hersteller veröffentlichte Diagonale, die um 0–2 % vom physisch gemessenen Wert abweichen kann.

Was ist der ISO-Standard für Papier-Seitenverhältnisse?

ISO 216:2007 definiert die A-, B- und C-Reihen der Papierformate. A-Reihen-Papiere haben ein Seitenverhältnis von 1:√2 ≈ 1:1,41421356… Dies ist das einzige Seitenverhältnis, bei dem das Falten eines Blattes in der Mitte dasselbe Seitenverhältnis ergibt. A0 ist als exakt 1 m² Fläche definiert; jedes nachfolgende An-Format hat die halbe Fläche des vorherigen. Das √2-Verhältnis ist der Grund, warum gefaltetes A4 exakt A5 ergibt.

Methodology

Design-Methodik

Seitenverhältnis per ggT-Kürzung. DPI als achsenweise Größe mit Geräte-Voreinstellungen als Rückfalloption.

By Buğra SözeriPublished May 15, 2026Updated May 31, 2026

Der Design-Cluster liefert zwei Rechner — Seitenverhältnis und DPI/PPI. Beide sind reine Mathematik-Werkzeuge, zu denen jeder Frontend-Entwickler und Grafikdesigner ein paar Mal pro Woche greift.

Seitenverhältnis — Euklids Algorithmus

Zu gegebener Breite und Höhe ist das gekürzte Seitenverhältnis Breite:Höhe geteilt durch ihren größten gemeinsamen Teiler. Wir verwenden Euklids Algorithmus (rekursiver ggT) auf ganzzahlig gerundeten Eingaben:

gcd(a, b) = b == 0 ? a : gcd(b, a mod b)
ratio = (w / gcd, h / gcd)

Für 1920×1080 ist ggT(1920, 1080) = 120, also ist das gekürzte Verhältnis 16:9. Bei nicht-ganzzahligen Eingaben (z. B. 1920,5×1080,3) runden wir vor dem Kürzen auf die nächste ganze Zahl — Halbpixel-Messungen sind Rauschen aus der Quellsoftware, kein echtes Seitenverhältnis.

Skalierung

Das Widget unterstützt auch den umgekehrten Fall — „gib mir eine Höhe für Breite X, die mein aktuelles Verhältnis trifft“. Die Formel ist einfach newHeight = newWidth × h / w unter Verwendung des ursprünglichen (ungekürzten) Verhältnisses, damit sich keine Gleitkomma-Drift aufsummiert.

Warum nicht immer auf kleinste Terme kürzen?

Einige Standardverhältnisse kürzen sich zu schlechter lesbaren Zahlen. Das Kinoverhältnis 2,39:1 ist technisch 239:100, was die gekürzte Form ist, aber schwerer zu erkennen. Wir zeigen das gekürzte Verhältnis an, wenn beide Terme unter 1000 liegen; bei Verhältnissen, die sich nicht sauber kürzen lassen, zeigen wir die Dezimalform (2,39:1).

DPI / PPI — Pixel pro physischer Einheit

DPI (dots per inch) und PPI (pixels per inch) sind in der Praxis austauschbare Begriffe — beide messen die Pixeldichte pro Zoll in Druck- und Bildschirmkontexten. Die Mathematik:

DPI = √(w_px² + h_px²) / diagonal_inches

Die Diagonale wird verwendet, weil Bildschirme über ihre Diagonalabmessung spezifiziert werden (ein „15-Zoll-Laptop“ bedeutet ein Display mit 15 Zoll Diagonale). Die achsenweise DPI ist dieselbe Formel pro Achse angewandt; bei quadratischen Pixeln (die alle modernen Displays haben) sind die beiden Werte identisch.

Die Retina-Frage

Apple prägte den Begriff „Retina“, um Displays zu beschreiben, bei denen die Pixeldichte die Fähigkeit des menschlichen Auges übersteigt, einzelne Pixel bei typischem Betrachtungsabstand aufzulösen. Die Schwelle:

Smartphone (betrachtet aus ~12 Zoll): 326 PPI
Tablet (~15 Zoll): 264 PPI
Laptop (~20 Zoll): 220 PPI
Desktop-Monitor (~30 Zoll): 150 PPI
Fernseher (~10 Fuß): 50 PPI

Das sind keine harten Untergrenzen — das menschliche Auge variiert, und die Annahme des „typischen Betrachtungsabstands“ ist die größte Variable. Moderne Smartphones liegen bei 400–500 PPI, deutlich über der Schwelle.

Ableitung der achsenweisen DPI aus einer Diagonalangabe

Das Bildschirm-Marketing gibt die Diagonale in Zoll an (ein 15,6-Zoll-Laptop), aber der Rechner will eine achsenweise Dichte. Die Ableitung verkettet den Satz des Pythagoras mit dem ganzzahligen Pixelraster. Für einen Bildschirm mit der Pixelauflösung (w_px, h_px) und der Diagonale D Zoll erfüllen physische Breite und Höhe in Zoll w_in² + h_in² = D². Sind die Pixel quadratisch — wovon jedes Flachbildschirm-Display seit den frühen 2000ern ausgeht — dann gilt w_in / h_in = w_px / h_px. Löst man die beiden Bedingungen nach w_in auf, ergibt sich:

w_in = D × w_px / √(w_px² + h_px²)
DPI = w_px / w_in = √(w_px² + h_px²) / D

Diese Diagonal-Pixel-Form ist es, die der Rechner ausliefert. Für ein 2560 × 1440-Display auf einem 27-Zoll-Monitor: √(2560² + 1440²) ≈ 2938 Pixel diagonal, geteilt durch 27 Zoll, ergibt 108,8 PPI. Die achsenweisen Werte sind bei quadratischen Pixeln identisch, sodass horizontale und vertikale Dichte übereinstimmen. Fälle mit nicht-quadratischen Pixeln (einige ältere SD-Videoformate, Hardware-Skalierung von Projektoren) erfordern separate B- und H-Eingaben und durchbrechen die Diagonal-Abkürzung.

Quellen & Referenzen

Euklids ggT-Algorithmus (Elemente, Buch VII) ist die primäre Quelle für die Kürzung von Seitenverhältnissen. CSS-Auflösungseinheiten, einschließlich der Beziehung zwischen dppx und dpi, finden sich in der W3C-Spezifikation CSS Values Level 4. ISO 216 definiert die √2-basierten Papierformate der A-Reihe, die mehreren DPI-Voreinstellungen zugrunde liegen. Die PPI-Werte der „Retina-Schwelle“ leiten sich aus Apples iPhone-4-Ankündigung von 2010 und der anschließenden Fachprüfung der Sehschärfeschwelle von „1 Bogenminute“ (Snellen 20/20) ab. Siehe den Quellenblock unten.

Annahmen & Einschränkungen

Nur ganzzahlige Pixeleingaben.Subpixel-Messungen (1920,5 × 1080,3) werden vor der ggT-Kürzung auf die nächste ganze Zahl gerundet. Die Antwort zum Seitenverhältnis bezieht sich auf das gerundete Raster, nicht auf die Gleitkomma-Quelle.
Quadratische Pixel angenommen. Moderne Flachbildschirme haben quadratische Pixel; einige ältere NTSC-/PAL-Inhalte und die Hardware-Skalierung von Projektoren haben rechteckige Pixel und würden achsenweise DPI-Eingaben erfordern.
Die Diagonal-Zoll-Eingabe ignoriert den Rahmen. Die Angabe „15,6-Zoll-Laptop“ bezieht sich auf die aktive Display-Diagonale. Misst man das Gehäuse, erhält man eine DPI, die ~5–10 % niedriger ist als die tatsächliche Bildschirm-DPI.
Keine automatische DPR-zu-DPI-Brücke.CSS-Pixel und Gerätepixel sind über das window.devicePixelRatio des Browsers verbunden; der Rechner arbeitet mit physischen Pixeln und überlässt die Umrechnung dem Nutzer.
Anzeigeobergrenze des Verhältnisses bei 1000:1000. Verhältnisse, die sich zu Termen über 1000 kürzen (z. B. 2,39:1 Kino), werden als Dezimalwerte angezeigt, was nachgelagerte Werkzeuge verwirren kann, die ganzzahlige Paare erwarten.
Keine DPI-Behandlung für gekachelte Mehrmonitor-Konfigurationen. Der Rechner arbeitet mit jeweils einem Bildschirm.

Warum „CSS-Pixel“ sich von „Gerätepixel“ unterscheidet

Auf einem Retina-Display ist ein 1×1-CSS-Pixel tatsächlich 2×2 oder 3×3 Gerätepixel — der Browser skaliert hoch, um Text bei typischem Betrachtungsabstand lesbar zu halten. devicePixelRatio im Browser legt dieses Verhältnis offen. Der DPI-Rechner arbeitet mit physischen Pixeln; wenn Sie speziell für CSS-Pixel gestalten, teilen Sie die angezeigte DPI durch Ihr Ziel-devicePixelRatio.

Frequently asked questions

Wie berechnet Convertitive das Seitenverhältnis?: Zu gegebenen Pixelmaßen B × H berechnen wir ggT(B, H) mit dem euklidischen Algorithmus (Euklids Elemente, Buch VII, ca. 300 v. Chr.) und geben B/ggT : H/ggT als gekürztes Verhältnis zurück. Beispiel: 1920 × 1080: ggT(1920, 1080) = 120, also ist das Verhältnis 16:9. Nicht-ganzzahlige Verhältnisse (z. B. 2,35:1 anamorphes Kino) werden als Dezimalwert angezeigt, wenn innerhalb einer Toleranz von 0,01 keine Kürzung auf kleine ganze Zahlen existiert.
Welche Formel verwendet der DPI-/PPI-Rechner?: PPI = √(B² + H²) / Diagonale_Zoll, wobei B und H die Pixelzahlen und Diagonale_Zoll die physische Bildschirmdiagonale sind. Dies ist die Standardformel für die diagonale Pixeldichte. Hinweis: PPI ist technisch nur dann Pixel pro Zoll entlang einer beliebigen Achse, wenn die Pixel quadratisch sind — nicht-quadratische Pixel (üblich in Broadcast-Video, z. B. DVBs 720 × 576 mit 16:9-Bildseitenverhältnis) erfordern separate horizontale und vertikale PPI-Werte.
Was ist der Unterschied zwischen DPI und PPI?: DPI (dots per inch) bezieht sich auf die Druckerausgabeauflösung — wie viele Tintenpunkte ein Drucker pro linearem Zoll setzt. PPI (pixels per inch) bezieht sich auf die Bildschirm-Pixeldichte. Die beiden sind numerisch austauschbar, wenn man die Bildauflösungs-Metadaten für den Druck festlegt, beschreiben aber physisch unterschiedliche Größen. CSS verwendet „dpi“ als Media-Query-Einheit (CSS Values Level 4), wobei 1dppx per Definition 96dpi entspricht.
Wie genau ist die DPI-Berechnung?: Die Formel ist bei genauen Eingaben mathematisch exakt. Die wichtigste Fehlerquelle ist die Messung der physischen Diagonale: vom Hersteller angegebene Diagonalwerte werden auf 0,1 Zoll gerundet, was eine Unsicherheit von ±0,05 Zoll einführt. Für ein 15,6-Zoll-Display mit 1920 × 1080 ergibt das PPI = 141,2 ± 0,5. Die Geräte-Voreinstellungen in unserem Rechner verwenden die vom Hersteller veröffentlichte Diagonale, die um 0–2 % vom physisch gemessenen Wert abweichen kann.
Was ist der ISO-Standard für Papier-Seitenverhältnisse?: ISO 216:2007 definiert die A-, B- und C-Reihen der Papierformate. A-Reihen-Papiere haben ein Seitenverhältnis von 1:√2 ≈ 1:1,41421356… Dies ist das einzige Seitenverhältnis, bei dem das Falten eines Blattes in der Mitte dasselbe Seitenverhältnis ergibt. A0 ist als exakt 1 m² Fläche definiert; jedes nachfolgende An-Format hat die halbe Fläche des vorherigen. Das √2-Verhältnis ist der Grund, warum gefaltetes A4 exakt A5 ergibt.

Sources & references

Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.

Euklid, Elemente, Buch VII, Propositionen 1-2 — Die ursprüngliche Formulierung des Algorithmus aus 300 v. Chr., den wir zur Kürzung von Seitenverhältnissen über den größten gemeinsamen Teiler verwenden.(as of 2026-05-15)
CSS Values and Units Module Level 4 — Resolution — W3C-Spezifikation, die die Einheiten dppx, dpcm, dpi definiert und wie sie sich bei jedem devicePixelRatio auf CSS-Pixel beziehen.(as of 2026-05-15)
ISO 216 — Papierformate — Der internationale Papierformat-Standard, dessen √2-Seitenverhältnis den A-Reihen-Druckannahmen in unseren DPI-Voreinstellungen zugrunde liegt.(as of 2026-05-15)

Published May 15, 2026 · Last reviewed May 31, 2026