Viewport vs. Risoluzione dello Schermo: Qual è la Differenza?

Hai mai acquistato un monitor o un computer portatile con uno splendido display 4K Ultra HD (3840 × 2160), per poi scoprire che gli strumenti di test online rilevano 1920 × 1080?

O magari possiedi uno smartphone con una risoluzione hardware di 2556 × 1179, ma durante la navigazione i siti web considerano la larghezza del tuo schermo come soli 393 pixel?

I produttori non ti hanno ingannato e il tuo browser funziona alla perfezione. Quello che stai osservando è il principio fondamentale del web moderno: la differenza tra Risoluzione dello Schermo e Dimensione del Viewport.

In questa guida completa chiariremo in modo semplice e diretto cosa sono i pixel fisici, i viewport, i pixel logici CSS, il Device Pixel Ratio (DPR) e il ridimensionamento dello schermo.

---

Riepilogo Rapido: Viewport vs Risoluzione in Breve

Parametro	Definizione Semplice	Come si Misura?	Esempio Tipico (Laptop Pro 16”)
Risoluzione Fisica dello Schermo	Il numero esatto di punti hardware luminosi (pixel) costruiti nel pannello.	Specifiche tecniche del produttore	3456 × 2234 pixel fisici
Risoluzione Ridimensionata del SO	L’area di lavoro virtuale impostata nel sistema operativo per consentire una lettura confortevole.	Impostazioni dello schermo del SO	1728 × 1117 punti (al 200% / scala @2x)
Risoluzione Rilevata dal Browser	Le dimensioni complessive dello schermo comunicate ai browser in unità logiche.	Rilevamento del browser web	1728 × 1117 pixel logici
Dimensione del Viewport	L’area visibile attiva all’interno della finestra del browser in cui viene disegnato il sito web.	Finestra del browser	1280 × 800 pixel logici
Device Pixel Ratio (DPR)	Il rapporto tra punti fisici utilizzati per disegnare un’unità logica di layout.	Misurazione della densità del display	2.0 (o 3.0 negli smartphone top di gamma)

---

1. Cos’è la Risoluzione dello Schermo?

La risoluzione dello schermo rappresenta la griglia fisica di punti microscopici (chiamati pixel) che compongono il display del tuo monitor, televisore o smartphone.

Ciascun pixel su un pannello LCD o OLED comprende tre sub-pixel: Rosso, Verde e Blu (RGB).

• Full HD (1080p): 1920 × 1080 pixel (~2,07 milioni di punti)
• QHD / 2K (1440p): 2560 × 1440 pixel (~3,69 milioni di punti)
• 4K Ultra HD: 3840 × 2160 pixel (~8,29 milioni di punti)

Questa risoluzione è un dato fisico hardware e non cambia mai.

---

2. Cos’è il Viewport?

Il viewport è l’area rettangolare visibile all’interno della finestra del browser destinata alla visualizzazione dei contenuti del sito web.

Il viewport non include le barre degli strumenti del browser e del sistema operativo:

• Schede del browser e barra del titolo
• Barra degli indirizzi e di ricerca
• Barra dei preferiti
• Pannello degli strumenti per sviluppatori
• Barra delle applicazioni o Dock

Ridimensionando la finestra del browser, la risoluzione del monitor resta invariata, ma le dimensioni del viewport cambiano istantaneamente.

---

3. Il Ponte: Pixel CSS e Device Pixel Ratio (DPR)

Per coniugare milioni di punti microscopici e una leggibilità confortevole, il web utilizza i Pixel CSS e il Device Pixel Ratio (DPR).

• Device Pixel Ratio (DPR) = Pixel Fisici ÷ Pixel Logici
• Pixel del Viewport = Pixel Fisici ÷ DPR

Con un DPR pari a 2.0:

• Il browser impagina elementi e testi su una griglia pari alla metà della risoluzione fisica.
• Lo schermo impiega una matrice di 4 pixel fisici (2 × 2) per ogni unità logica.
• I testi rimangono grandi e comodi da leggere, mentre le immagini e i caratteri risultano incredibilmente nitidi.

---

4. Domande Frequenti (FAQ)

Perché il mio monitor 4K risulta a 1080p nei test online?

Perché il tuo sistema operativo ha attivato il ridimensionamento del display (di solito al 200%). Il browser rileva pixel logici affinché caratteri e icone rimangano chiari e leggibili.

Come posso testare la mia risoluzione e il viewport adesso?

Puoi verificare la risoluzione del tuo schermo, le dimensioni del viewport in tempo reale e il DPR gratuitamente sulla home page di WhatIsMyScreenResolutions.com.