Risoluzione dello schermo
Viewport del browser aggiornata in diretta mentre ridimensioni la finestra, più risoluzione dello schermo, pixel ratio, orientamento e profondità colore.
Viewport e risoluzione dello schermo non sono la stessa cosa
La risoluzione dello schermo è la dimensione totale del display (per esempio 1920×1080), mentre la viewport è solo l'area in cui il browser disegna la pagina: esclude barra degli indirizzi, schede e barre di sistema, e si riduce se la finestra non è a schermo intero. Quando si progetta un sito responsive, le media query CSS guardano la viewport, non lo schermo: è per questo che questa pagina la mostra in diretta mentre ridimensioni.
Cosa significa device pixel ratio?
Sui display ad alta densità (Retina, molti smartphone) ogni pixel CSS è disegnato usando più pixel fisici: un pixel ratio di 2 significa 4 pixel reali per ogni pixel logico. È il motivo per cui un telefono con schermo 1170×2532 può dichiarare una viewport di appena 390 pixel di larghezza. Il valore conta molto per chi prepara immagini: per apparire nitida su un display con ratio 2, un'immagine larga 300 px CSS dovrebbe averne almeno 600 reali.