Info schermo e browser

Visualizza risoluzione schermo, dimensione finestra, browser e dettagli dispositivo in tempo reale

Che cos'è e come funziona?

Le informazioni dello schermo — risoluzione, densità dei pixel, rapporto pixel dispositivo, profondità colore, orientamento e dimensioni del viewport — sono contesto essenziale per il design web responsive e la risoluzione dei problemi di visualizzazione. Un monitor "2560×1440" con rapporto pixel 2× significa che il viewport CSS è di 1280×720 pixel.

Questo strumento legge le API Screen e Window del browser per visualizzare risoluzione, dimensioni viewport, DPR, profondità colore e orientamento.

Casi d'uso

• Debug HiDPI: se le immagini sembrano sfocate su un MacBook Pro, controlla il DPR — tipicamente 2. Le immagini devono essere servite al 2× della loro dimensione CSS per apparire nitide sui display Retina.
• Test punti di interruzione responsive: controlla la larghezza attuale del viewport per verificare che i breakpoint CSS si attivino alle dimensioni corrette.
• Verifica QA: quando un cliente segnala un bug di layout "su mobile", ottieni le dimensioni esatte del suo dispositivo con questo strumento.

Domande frequenti

Cos'è il rapporto pixel dispositivo (DPR)?

DPR è il rapporto tra pixel fisici e pixel CSS. DPR di 2 (Retina/HiDPI) = 4 pixel fisici per pixel CSS. Le immagini a 100px di larghezza CSS hanno bisogno di 200px di larghezza per apparire nitide.

Qual è la differenza tra risoluzione dello schermo e dimensione del viewport?

La risoluzione dello schermo è la risoluzione totale del monitor in pixel CSS. La dimensione del viewport è l'area browser visibile senza le barre degli strumenti. Le media query usano le dimensioni del viewport.

Cos'è la profondità del colore?

24 bit (8 bit per R, G, B) è lo standard per la maggior parte degli schermi, con supporto per 16,7 milioni di colori. Per il web design, la profondità del colore raramente è rilevante.

Come posso testare diverse dimensioni dello schermo senza un dispositivo reale?

Le devtools del browser (F12) → Toggle Device Toolbar consentono di simulare qualsiasi dimensione del viewport e DPR con preset per iPhone, iPad, Pixel, Galaxy.

Utilità

Generatore password · Generatore codice QR · Cronometro · Timer · Calcolatrice · Generatore di numeri casuali