Rilevatore Dimensioni Schermo

Riferimento

Viewport vs risoluzione schermo — qual è la differenza?

Il viewport è l'area visibile di una pagina web all'interno della finestra del browser, misurata in pixel CSS (window.innerWidth × window.innerHeight). Cambia quando ridimensioni il browser o apri DevTools. La risoluzione schermo è il conteggio totale dei pixel del tuo display fisico (screen.width × screen.height) — è fissa in base all'hardware e alle impostazioni del display. Per il web design responsive, il viewport è quello che conta — determina quali media query e breakpoint CSS sono attivi.

Cos'è il rapporto pixel del dispositivo (DPR)?

Il Rapporto Pixel del Dispositivo (DPR) indica quanti pixel fisici (hardware) corrispondono a un pixel CSS. Un DPR di 1 significa corrispondenza 1:1 (display standard). Un DPR di 2 significa un display Retina/HiDPI — ogni pixel CSS è reso con 4 pixel fisici (2×2), producendo testo e immagini più nitidi. Un DPR di 3 è comune sugli smartphone di fascia alta. Questo è rilevante per: servire immagini @2x/@3x a schermi ad alto DPR, capire perché gli screenshot su display Retina sono il doppio della risoluzione prevista, e debuggare problemi di layout che appaiono solo con valori DPR specifici.

Casi d'uso per il rilevamento schermo

Test design responsive — verifica che i breakpoint CSS scattino alle larghezze viewport corrette senza aprire DevTools. Segnalazione bug — condividi le dimensioni esatte del viewport, la risoluzione dello schermo e il DPR quando segnali problemi di visualizzazione agli sviluppatori. Pianificazione screenshot — conosci le dimensioni esatte prima di scattare screenshot per documentazione o listing sugli app store. Dimensionamento annunci e banner — verifica che le dimensioni del viewport corrispondano alle dimensioni degli slot pubblicitari richieste per la pubblicità display.

Privacy

Le dimensioni dello schermo vengono lette localmente dalle API del tuo browser. Nessun dato viene inviato a nessun server.