Test di Dimensione Viewport e Breakpoint Responsive

Il viewport è l'area in cui una pagina web deve disegnare — la finestra del browser senza le schede, la barra degli indirizzi e le barre di scorrimento. Ecco perché è quasi sempre più piccolo della risoluzione dello schermo: lo schermo è tutto il pannello, mentre il viewport è solo la fetta che la pagina può usare. Viene misurato in pixel CSS, unità di layout piuttosto che in punti fisici — i display ad alta densità 'Retina' racchiudono due o tre pixel fisici in ciascun pixel CSS in modo che il testo appaia più nitido, e window.devicePixelRatio riporta quel moltiplicatore.

Questo strumento legge window.innerWidth e window.innerHeight ad ogni ridimensionamento e cambio di orientamento, insieme al viewport del layout da documentElement.clientWidth/clientHeight, il rapporto pixel del dispositivo e l'orientamento. Un breakpoint è una larghezza di viewport in cui un layout cambia — colonne si impilano, un menu si collassa, il testo cambia dimensione — e framework come Tailwind CSS applicano stili da un insieme di larghezze nominate verso l'alto. Il riferimento qui sotto evidenzia l'intervallo in cui rientra la larghezza, e il pannello di test trascinabile riporta il breakpoint che la sua larghezza raggiungerebbe, così puoi visualizzare in anteprima un componente senza ridimensionare tutta la finestra. Tutto funziona localmente; non viene caricato nulla.

Se i numeri non sembrano precisi, diversi elementi si collocano tra la risoluzione del pannello e il viewport che una pagina vede. L'interfaccia del browser e le barre di scorrimento sottraggono dall'area utilizzabile, e lo zoom della pagina riduce il numero di pixel CSS — quindi innerWidth diminuisce senza che la finestra si muova — così come lo scaling del display del sistema operativo, motivo per cui due monitor identici possono segnalare dimensioni diverse. Sui telefoni il tag meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, posiziona la pagina alla larghezza del dispositivo invece di fingere un desktop ~980px, quindi un viewport a 390 px a DPR 3 si trova su un pannello di circa 1170 pixel fisici. 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 comuni