Qual è la risoluzione del mio schermo? Viewport, DPR e breakpoint | We.Inc
Vedi dal vivo la risoluzione dello schermo, la dimensione del viewport del browser e il device pixel ratio, più il breakpoint Tailwind e Bootstrap in cui ti trovi e una tabella delle dimensioni dei dispositivi più comuni.
La risoluzione del tuo schermo è mostrata nel primo riquadro di questa pagina, misurata dal tuo browser al caricamento. È espressa in pixel CSS; moltiplicala per il device pixel ratio per ottenere i pixel fisici. La pagina mostra anche il viewport del tuo browser, cioè lo spazio che il tuo sito ottiene davvero, e si aggiorna dal vivo mentre ridimensioni la finestra.
Cosa significa ogni numero
Misura
Cos'è
Schermo
L'intero display, in pixel CSS
Viewport
L'area visibile della pagina dentro la finestra del browser
Device pixel ratio
Pixel fisici per ogni pixel CSS (2 o 3 sulla maggior parte dei telefoni)
Risoluzione fisica
Dimensione dello schermo moltiplicata per il pixel ratio
Dimensione dello schermo, dimensione del viewport, device pixel ratio, orientamento e profondità di colore, letti dal vivo dal tuo browser. Ti dice anche in quale breakpoint Tailwind e Bootstrap rientra la finestra attuale, con media query da copiare e una tabella delle dimensioni dei dispositivi più comuni.
Apri la pagina. I numeri provengono dagli oggetti screen e window del tuo browser, quindi non si installa nulla e nulla viene inviato altrove.
Ridimensiona la finestra o ruota il telefono. Viewport, breakpoint e orientamento si aggiornano subito.
Controlla il pannello dei breakpoint per vedere quali breakpoint Tailwind e Bootstrap si applicano alla larghezza attuale.
Copia una media query per qualsiasi breakpoint, oppure confronta i tuoi numeri con la tabella dei dispositivi qui sotto.
Progetta per le larghezze del viewport, non per le risoluzioni dello schermo. Uno schermo da 1920 pixel può mostrare una finestra del browser da 1200 pixel, e quella finestra è tutto lo spazio che ha il tuo layout.
Prova a 360 e 390 pixel di larghezza. Molti telefoni Android dichiarano da 360 a 412 pixel CSS e gli iPhone recenti da 375 a 440, quindi un layout che funziona a 360 copre la maggior parte dei telefoni.
Fornisci le immagini al doppio della dimensione con cui vengono mostrate, oppure usa srcset, così restano nitide sugli schermi con un pixel ratio di 2 o più.
Lo zoom del browser cambia sia il viewport sia il pixel ratio. Se i numeri sembrano strani, reimposta lo zoom con Ctrl+0 o Cmd+0 e controlla di nuovo.
Domande frequenti
Perché la risoluzione del mio schermo sembra più piccola di quella indicata dal monitor?
I browser riportano le dimensioni in pixel CSS. Quando il sistema operativo scala il display, per esempio al 150% su un monitor 4K o su qualsiasi Mac Retina, un pixel CSS copre più pixel fisici. Moltiplica la dimensione dello schermo per il device pixel ratio mostrato qui per ottenere la risoluzione fisica.
Qual è la differenza tra dimensione dello schermo e dimensione del viewport?
La dimensione dello schermo è l'intero display. La dimensione del viewport è la parte della finestra del browser che mostra la pagina, escludendo barra degli indirizzi, schede, barre degli strumenti ed eventuali pannelli agganciati. I siti web impaginano in base al viewport, quindi è quello il numero da usare per il responsive design.
Cos'è il device pixel ratio?
È il numero di pixel fisici usati per disegnare un pixel CSS in ciascuna direzione. Un rapporto di 1 corrisponde a un display standard, 2 è comune su portatili con schermi ad alta densità e tablet, e 3 è comune sui telefoni. Cambia anche quando fai zoom sulla pagina.
Quali breakpoint dovrei usare per il responsive design?
Parti dai valori predefiniti del tuo framework, elencati in questa pagina per Tailwind e Bootstrap, poi aggiungi un breakpoint ovunque il tuo contenuto inizi a sembrare compresso o troppo allungato. I breakpoint devono seguire il contenuto, non dispositivi specifici.
Viene salvato qualcosa sul mio dispositivo?
No. I valori vengono letti nel tuo browser e mostrati nella pagina. Non vengono inviati a noi né salvati.
Pixel CSS e pixel fisici
Un pixel CSS è un'unità di lunghezza, non un punto sullo schermo. Su un telefono con un pixel ratio di 3, un box da 100 per 100 pixel CSS viene disegnato con 300 per 300 pixel fisici. Ecco perché un telefono con un pannello largo 1179 pixel dice ai siti di essere largo 393 pixel: il browser mostra una pagina leggibile a una dimensione comoda e la disegna con più dettaglio.
Per il layout contano solo i pixel CSS. Per le immagini contano anche i pixel fisici, perché un'immagine larga esattamente quanto il suo box in pixel CSS apparirà sfocata su uno schermo con rapporto 2 o 3.
I breakpoint nella pratica
Tailwind e Bootstrap sono mobile first: gli stili senza prefisso si applicano a ogni larghezza, e ogni breakpoint aggiunge regole dalla sua larghezza minima in su. md in Tailwind significa 768 pixel e oltre, non solo tablet.
Il pannello dei breakpoint in questa pagina misura il viewport nello stesso modo delle media query di quei framework, quindi ciò che mostra è l'insieme di classi che sarebbero attive in questa finestra in questo momento.
Breakpoint min-width predefiniti in Tailwind CSS e Bootstrap 5
Framework
Breakpoint
Si applica da
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Dimensioni del viewport dei dispositivi più comuni in pixel CSS (verticale), con pixel ratio e pixel fisici
Tipo
Dispositivo o impostazione
Viewport (px CSS)
Pixel ratio
Pixel fisici
Telefono
iPhone SE (2a e 3a gen.)
Telefono
iPhone 13 e 14
Telefono
iPhone 15 e 16
Telefono
iPhone 16 Pro
Telefono
iPhone 15 Plus e 16 Plus
Telefono
iPhone 16 Pro Max
Telefono
Samsung Galaxy S24
Telefono
Google Pixel 8
Tablet
iPad mini (6a gen.)
Tablet
iPad (10a gen.)
Tablet
iPad Pro 11 pollici (4a gen.)
Tablet
iPad Pro 12.9 pollici
Portatile
Portatile HD
Portatile
Full HD con ridimensionamento al 125%
Portatile
MacBook Air 13 pollici (M2, predefinito)
Desktop
Monitor Full HD
Desktop
Monitor QHD
Desktop
Monitor 4K con ridimensionamento al 150%
Verticale
Orizzontale
Copia la media query {name}
Schermo {sw}×{sh} (fisico {pw}×{ph}), viewport {vw}×{vh}, device pixel ratio {dpr}
Il tuo schermo in questo momento
Risoluzione dello schermo (px CSS)
Proporzioni {ratio}
Risoluzione fisica
Schermo × device pixel ratio
Viewport del browser
L'area in cui viene impaginata la tua pagina
Device pixel ratio
Cambia con lo zoom del browser
Schermo disponibile
Schermo meno barra delle applicazioni o Dock
Orientamento e colore
{orientation}, {depth} bit
Touch screen rilevato
Nessun touch screen rilevato
Copia questi numeri
Lettura del tuo schermo in corso. Serve JavaScript.
In quale breakpoint ti trovi
Misurato sulla larghezza del viewport{width}. Ridimensiona la finestra per vederlo cambiare.