Test di Dimensione Viewport e Breakpoint Responsive
Scopri quanto è davvero grande la finestra del tuo browser per una pagina web. Questo strumento legge la larghezza e l'altezza del tuo viewport in pixel CSS, il device pixel ratio e l'orientamento, e mostra in quale breakpoint responsive rientra la dimensione attuale — tutto in tempo reale. Ridimensiona la finestra e ogni valore si aggiorna istantaneamente.
Ridimensiona la finestra del tuo browser e osserva questi valori aggiornarsi in tempo reale.
Breakpoint di Tailwind CSS
L'intervallo in cui rientra il tuo viewport viene evidenziato mentre ridimensioni.
| Prefisso | Larghezza minima | Si applica da |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Categorie di dispositivi
Pannello di test ridimensionabile
Trascina l'angolo in basso a destra per ridimensionare questo pannello. Indica la propria dimensione e quale breakpoint raggiungerebbe quella larghezza — un rapido indicatore responsive.
Dimensioni viewport comuni dei dispositivi
Viewport in pixel CSS approssimativi in verticale, come riferimento — i valori effettivi variano in base a browser e sistema operativo.
| Dispositivo | Viewport (px CSS) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Strumenti correlati
Cos'è un viewport
Il viewport è l'area visibile che una pagina web ha a disposizione per essere disegnata — la regione dei contenuti della finestra del browser, escludendo schede, barra degli indirizzi o barra dei preferiti. Per questo è quasi sempre più piccolo della risoluzione dello schermo: lo schermo è l'intero pannello, mentre il viewport è solo la porzione che la pagina può utilizzare. window.innerWidth e window.innerHeight riportano quest'area in pixel CSS, mentre documentElement.clientWidth/clientHeight riportano il viewport di layout (la stessa area meno la larghezza di una classica barra di scorrimento, quando presente). Poiché il viewport cambia nell'istante in cui ridimensioni la finestra, dividi lo schermo o ruoti il dispositivo, è il valore a cui i layout responsive rispondono davvero.
Pixel CSS vs pixel del dispositivo e devicePixelRatio
Un pixel CSS è un'unità di layout, non un punto fisico sul pannello. Su un display standard un pixel CSS corrisponde a un pixel fisico, ma gli schermi ad alta densità 'Retina' racchiudono due o tre pixel fisici in ogni pixel CSS in modo che il testo appaia più nitido. window.devicePixelRatio indica questo moltiplicatore: un valore di 2 significa che un viewport largo 1440 pixel CSS viene disegnato con 2880 pixel fisici. Le pagine web vengono impaginate in pixel CSS, quindi un telefono che riporta un viewport largo 390 pixel con un DPR di 3 ha un pannello fisico di circa 1170 pixel. Per vedere la risoluzione fisica completa e la densità di pixel del tuo schermo, usa gli strumenti What Is My Screen Size e Screen Resolution Test.
Breakpoint responsive
Un breakpoint è una larghezza del viewport in corrispondenza della quale un layout cambia — le colonne si impilano, un menu si comprime, il testo cambia dimensione. Le media query CSS e i framework di utility come Tailwind CSS definiscono un piccolo insieme di larghezze denominate e applicano gli stili a partire da quella larghezza in su. I valori predefiniti di Tailwind sono sm a 640px, md a 768px, lg a 1024px, xl a 1280px e 2xl a 1536px; sotto i 640px ci si trova nell'intervallo base senza prefisso. Il riferimento qui sotto evidenzia l'intervallo attivo mentre ridimensioni, e il pannello di test trascinabile indica quale breakpoint raggiungerebbe la sua stessa larghezza — un modo rapido per vedere come si comporta un componente a dimensioni diverse senza cambiare l'intera finestra.
Perché innerWidth differisce dalla larghezza dello schermo
Diversi fattori si frappongono tra la risoluzione del tuo pannello e il viewport che una pagina vede. La cornice del browser (schede, barre degli strumenti e una barra di scorrimento visibile) sottrae area utilizzabile. Anche lo zoom della pagina la modifica: aumentando lo zoom si riduce il numero di pixel CSS che entrano nello spazio disponibile, quindi innerWidth diminuisce anche se la finestra non si è spostata, e influisce anche su devicePixelRatio. Su mobile, il tag meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — indica al browser di impostare il viewport di layout sulla larghezza del dispositivo invece di fingere di essere un desktop di circa 980px, motivo per cui i siti responsive ne hanno bisogno. Anche il ridimensionamento del display del sistema operativo modifica il conteggio dei pixel CSS, ed è per questo che due monitor identici possono riportare dimensioni di viewport diverse.