Come calcola Convertitive il rapporto d'aspetto?

Date le dimensioni in pixel L × A, calcoliamo MCD(L, A) usando l'algoritmo di Euclide (Elementi di Euclide, Libro VII, c. 300 a.C.) e restituiamo L/MCD : A/MCD come rapporto ridotto. Per esempio, 1920 × 1080: MCD(1920, 1080) = 120, quindi il rapporto è 16:9. I rapporti non interi (es. 2,35:1 cinema anamorfico) vengono visualizzati come decimale quando non esiste una riduzione a piccoli interi entro una tolleranza di 0,01.

Quale formula usa il calcolatore DPI / PPI?

PPI = √(L² + A²) / diagonale_pollici, dove L e A sono i conteggi dei pixel e diagonale_pollici è la diagonale fisica dello schermo. Questa è la formula standard della densità di pixel diagonale. Nota: PPI è tecnicamente pixel per pollice lungo qualsiasi asse solo se i pixel sono quadrati — i pixel non quadrati (comuni nel video broadcast, es. DVB 720 × 576 con rapporto d'aspetto di visualizzazione 16:9) richiedono valori PPI orizzontali e verticali separati.

Qual è la differenza tra DPI e PPI?

DPI (dots per inch) si riferisce alla risoluzione di output della stampante — quanti punti di inchiostro una stampante colloca per pollice lineare. PPI (pixels per inch) si riferisce alla densità di pixel dello schermo. I due sono numericamente intercambiabili quando si imposta la risoluzione dei metadati dell'immagine per la stampa, ma descrivono quantità fisicamente diverse. CSS usa 'dpi' come unità di media query (CSS Values Level 4) dove 1dppx = 96dpi per definizione.

Quanto è accurato il calcolo DPI?

La formula è matematicamente esatta con input accurati. La fonte principale di errore è la misura della diagonale fisica: le cifre diagonali riportate dai produttori sono arrotondate a 0,1 pollici, introducendo un'incertezza di ±0,05 pollici. Per un display da 15,6 pollici a 1920 × 1080 questo dà PPI = 141,2 ± 0,5. I preset del dispositivo nel nostro calcolatore usano la diagonale pubblicata dal produttore, che può differire dal valore fisicamente misurato dello 0-2%.

Qual è lo standard ISO per i rapporti d'aspetto della carta?

ISO 216:2007 definisce le serie A, B e C dei formati carta. I fogli della serie A hanno un rapporto d'aspetto di 1:√2 ≈ 1:1,41421356… Questo è l'unico rapporto d'aspetto in cui piegare un foglio a metà produce lo stesso rapporto d'aspetto. A0 è definito come esattamente 1 m² di area; ogni successiva dimensione An è la metà dell'area della precedente. Il rapporto √2 è il motivo per cui A4 piegato produce esattamente A5.

Methodology

Metodologia del design

Rapporto d'aspetto tramite riduzione GCD. DPI come quantità per asse con fallback a preset del dispositivo.

By Buğra SözeriPublished May 15, 2026

Il cluster Designoffre due calcolatori — rapporto d’aspetto e DPI/PPI. Entrambi sono utility di pura matematica che ogni sviluppatore front-end e grafico usa alcune volte alla settimana.

Rapporto d’aspetto — l’algoritmo di Euclide

Dati larghezza e altezza, il rapporto d’aspetto ridotto è larghezza:altezza diviso per il loro massimo comune divisore. Usiamo l’algoritmo di Euclide (MCD ricorsivo) su input arrotondati a interi:

mcd(a, b) = b == 0 ? a : mcd(b, a mod b)
rapporto = (w / mcd, h / mcd)

Per 1920×1080, mcd(1920, 1080) = 120, quindi il rapporto ridotto è 16:9. Per gli input non interi (es. 1920,5×1080,3), arrotondiamo all’intero più vicino prima di ridurre — le misure a mezzo pixel sono rumore dal software sorgente, non un aspetto reale.

Scalatura

Il widget supporta anche l’inverso — “dammi un’altezza per la larghezza X che corrisponda al mio rapporto attuale.” La formula è semplicemente nuovaAltezza = nuovaLarghezza × h / w usando il rapporto originale (non ridotto) così la deriva della virgola mobile non si accumula.

Perché non ridurre sempre ai termini minimi?

Alcuni rapporti standard si riducono a numeri meno leggibili. Il rapporto cinematografico 2,39:1 è tecnicamente 239:100, che è la forma ridotta ma più difficile da riconoscere. Visualizziamo il rapporto ridotto quando entrambi i termini sono sotto 1000; per i rapporti che non si riducono in modo pulito visualizziamo la forma decimale (2,39:1).

DPI / PPI — pixel per unità fisica

DPI (dots per inch) e PPI (pixels per inch) sono termini intercambiabili in pratica — entrambi misurano la densità di pixel per pollice nei contesti di stampa e schermo. La matematica:

DPI = √(l_px² + a_px²) / diagonale_pollici

La diagonale viene usata perché gli schermi sono specificati dalla dimensione diagonale (un “laptop da 15 pollici” indica un display da 15 pollici di diagonale). Il DPI per asse è la stessa formula applicata per asse; per i pixel quadrati (che tutti i display moderni hanno), i due valori sono identici.

La questione retina

Apple ha coniato “retina” per descrivere i display dove la densità di pixel supera la capacità dell’occhio umano di risolvere i singoli pixel a distanza di visualizzazione tipica. La soglia:

Telefono (visto a ~30 cm): 326 PPI
Tablet (~38 cm): 264 PPI
Laptop (~50 cm): 220 PPI
Monitor desktop (~75 cm): 150 PPI
TV (~3 m): 50 PPI

Questi non sono limiti rigidi — l’occhio umano varia, e il presupposto della “distanza di visualizzazione tipica” è la variabile più grande. I moderni telefoni funzionano a 400-500 PPI, comodamente sopra la soglia.

Derivazione del DPI per asse da una specifica diagonale

Il marketing degli schermi specifica la diagonale in pollici (un laptop da 15,6 pollici), ma il calcolatore vuole una densità per asse. La derivazione collega il teorema di Pitagora con la griglia di pixel interi. Per uno schermo con risoluzione pixel (l_px, a_px) e diagonale Dpollici, la larghezza e l’altezza fisiche in pollici soddisfano l_in² + a_in² = D². Se i pixel sono quadrati — il che ogni pannello piatto dalla metà degli anni 2000 assume — allora l_in / a_in = l_px / a_px. Risolvendo i due vincoli per l_in si ottiene:

l_in = D × l_px / √(l_px² + a_px²)
DPI = l_px / l_in = √(l_px² + a_px²) / D

Quella forma pixel-diagonale è ciò che il calcolatore usa. Per un display 2560 × 1440 su un monitor da 27 pollici: √(2560² + 1440²) ≈ 2938 pixel diagonali, diviso per 27 pollici, dà 108,8 PPI. I valori per asse sono identici per i pixel quadrati, quindi la densità orizzontale e verticale coincidono. I casi di pixel non quadrati (alcuni formati video SD legacy, ridimensionamento hardware del proiettore) richiedono input separati l e a e rompono la scorciatoia solo-diagonale.

Fonti e riferimenti

L’algoritmo MCD di Euclide (Elementi, Libro VII) è la citazione primaria per la riduzione del rapporto d’aspetto. Le unità di risoluzione CSS, inclusa la relazione tra dppx e dpi, sono nella specifica W3C CSS Values Level 4. ISO 216 definisce i formati carta della serie A basati su √2 che ancoraggio diversi preset DPI. Le cifre PPI “soglia retina” derivano dall’annuncio di Apple dell’iPhone 4 nel 2010 e dalla successiva revisione tra pari della soglia di acuità visiva “1 minuto d’arco” (Snellen 20/20). Vedi il blocco Fonti qui sotto.

Presupposti e limitazioni

Solo input pixel interi.Le misure sub-pixel (1920,5 × 1080,3) vengono arrotondate all’intero più vicino prima della riduzione MCD. La risposta del rapporto d’aspetto è per la griglia arrotondata, non per la sorgente in virgola mobile.
Pixel quadrati assunti. I pannelli piatti moderni sono a pixel quadrati; alcuni contenuti NTSC / PAL legacy e il ridimensionamento hardware del proiettore hanno pixel rettangolari e richiederebbero input DPI per asse.
L’input della diagonale in pollici ignora la cornice. La cifra del laptop da 15,6 pollici si riferisce alla diagonale del display attivo. Se misuri il chassis otterrai un DPI ~5-10% inferiore al DPI effettivo dello schermo.
Nessun bridge DPR-to-DPI automatico. I pixel CSS e i pixel del dispositivo sono correlati dal window.devicePixelRatiodel browser; il calcolatore opera sui pixel fisici e lascia la conversione all’utente.
Cap visualizzazione rapporto a 1000:1000. I rapporti che si riducono a termini superiori a 1000 (es. 2,39:1 cinema) vengono visualizzati come decimali, il che può confondere gli strumenti a valle che si aspettano coppie di interi.
Nessuna gestione DPI per configurazioni tiled / multi-monitor. Il calcolatore lavora su uno schermo alla volta.

Perché il “pixel CSS” è diverso dal “pixel del dispositivo”

Su un display retina, un pixel CSS 1×1 è in realtà 2×2 o 3×3 pixel del dispositivo — il browser scala verso l’alto per mantenere il testo leggibile a distanza di visualizzazione tipica. devicePixelRatio nel browser espone questo rapporto. Il calcolatore DPI opera sui pixel fisici; se stai progettando per i pixel CSS specificamente, dividi il DPI riportato per il tuo devicePixelRatio target.

Frequently asked questions

Come calcola Convertitive il rapporto d'aspetto?: Date le dimensioni in pixel L × A, calcoliamo MCD(L, A) usando l'algoritmo di Euclide (Elementi di Euclide, Libro VII, c. 300 a.C.) e restituiamo L/MCD : A/MCD come rapporto ridotto. Per esempio, 1920 × 1080: MCD(1920, 1080) = 120, quindi il rapporto è 16:9. I rapporti non interi (es. 2,35:1 cinema anamorfico) vengono visualizzati come decimale quando non esiste una riduzione a piccoli interi entro una tolleranza di 0,01.
Quale formula usa il calcolatore DPI / PPI?: PPI = √(L² + A²) / diagonale_pollici, dove L e A sono i conteggi dei pixel e diagonale_pollici è la diagonale fisica dello schermo. Questa è la formula standard della densità di pixel diagonale. Nota: PPI è tecnicamente pixel per pollice lungo qualsiasi asse solo se i pixel sono quadrati — i pixel non quadrati (comuni nel video broadcast, es. DVB 720 × 576 con rapporto d'aspetto di visualizzazione 16:9) richiedono valori PPI orizzontali e verticali separati.
Qual è la differenza tra DPI e PPI?: DPI (dots per inch) si riferisce alla risoluzione di output della stampante — quanti punti di inchiostro una stampante colloca per pollice lineare. PPI (pixels per inch) si riferisce alla densità di pixel dello schermo. I due sono numericamente intercambiabili quando si imposta la risoluzione dei metadati dell'immagine per la stampa, ma descrivono quantità fisicamente diverse. CSS usa 'dpi' come unità di media query (CSS Values Level 4) dove 1dppx = 96dpi per definizione.
Quanto è accurato il calcolo DPI?: La formula è matematicamente esatta con input accurati. La fonte principale di errore è la misura della diagonale fisica: le cifre diagonali riportate dai produttori sono arrotondate a 0,1 pollici, introducendo un'incertezza di ±0,05 pollici. Per un display da 15,6 pollici a 1920 × 1080 questo dà PPI = 141,2 ± 0,5. I preset del dispositivo nel nostro calcolatore usano la diagonale pubblicata dal produttore, che può differire dal valore fisicamente misurato dello 0-2%.
Qual è lo standard ISO per i rapporti d'aspetto della carta?: ISO 216:2007 definisce le serie A, B e C dei formati carta. I fogli della serie A hanno un rapporto d'aspetto di 1:√2 ≈ 1:1,41421356… Questo è l'unico rapporto d'aspetto in cui piegare un foglio a metà produce lo stesso rapporto d'aspetto. A0 è definito come esattamente 1 m² di area; ogni successiva dimensione An è la metà dell'area della precedente. Il rapporto √2 è il motivo per cui A4 piegato produce esattamente A5.

Published May 15, 2026