Dimensioni e Risoluzioni Schermo dei Dispositivi

Risoluzione logica vs fisica e DPR

Ogni schermo moderno ha due risoluzioni. La risoluzione fisica è il numero reale di pixel presenti nel pannello, ad esempio 1179 × 2556 su un iPhone 15. La risoluzione logica (CSS) è lo spazio di coordinate più piccolo in cui viene impaginata una pagina web, ad esempio 393 × 852. Il device pixel ratio (DPR) fa da ponte tra i due valori: è la risoluzione fisica divisa per quella logica, quindi un DPR di 3 significa che il telefono disegna un blocco di 3 × 3 pixel reali per ogni pixel CSS. Gli smartphone e i laptop ad alta densità “Retina” usano un DPR di 2 o 3 per rendere testo e immagini nitidi, mentre un tipico monitor desktop ha un DPR di 1, dove un pixel CSS equivale a un pixel fisico.

Perché i designer lavorano con le dimensioni del viewport

Quando crei un layout responsive, le media query e i breakpoint CSS vengono misurati in pixel CSS — il viewport logico — non nei pixel fisici del pannello. Un telefono fisicamente largo 1080 pixel riporta comunque un viewport di soli 360–414 pixel CSS, ed è per questo che un breakpoint mobile di 360px copre la maggior parte degli smartphone Android. Progettare in base al viewport anziché alla risoluzione grezza mantiene testo e aree touch di una dimensione fisica coerente su dispositivi con densità di pixel molto diverse, così lo stesso layout risulta corretto sia su un laptop a bassa densità sia su uno smartphone flagship ad alta densità.

Come leggere questa tabella

• Viewport (px CSS) è la dimensione logica vista da una pagina web, indicata nell'orientamento naturale del dispositivo: verticale per smartphone e tablet, orizzontale per laptop e monitor.
• La risoluzione fisica è il numero reale di pixel del pannello, il valore riportato nelle schede tecniche.
• Il DPR (device pixel ratio) moltiplica il viewport fino a raggiungere la risoluzione fisica; qualsiasi valore superiore a 1 indica uno schermo ad alta densità.
• Le proporzioni indicano la forma dello schermo, dal formato allungato 19.5:9 degli smartphone moderni al 16:9 della maggior parte dei monitor, fino al 21:9 e al 32:9 degli ultrawide.
• Le righe di laptop e 4K riflettono il livello di scaling del display predefinito più comune, quindi il viewport può essere più piccolo della risoluzione nativa del pannello.

Le dimensioni cambiano a ogni modello

Considera questi valori come un riferimento pratico, non come una garanzia. I produttori rivedono le dimensioni dello schermo quasi a ogni generazione — il solo iPhone ha adottato viewport larghi 375, 390, 393, 402, 414, 430 e 440 pixel CSS nei modelli recenti — e i dispositivi Android variano ancora di più. Lo scaling del display del sistema operativo modifica ulteriormente il viewport riportato: un laptop Windows 1080p con scaling al 150% si comporta come uno schermo 1280 × 720 con un DPR di 1.5. Il valore più affidabile è sempre quello riportato dal tuo browser, motivo per cui il dispositivo corrispondente qui sopra viene rilevato in tempo reale dal tuo schermo.