Come si usa
- Apri la pagina. I valori vengono letti immediatamente dal browser.
- Ridimensiona la finestra o ruota il dispositivo per vedere aggiornarsi le dimensioni e l'orientamento del viewport.
- Usa «Copia tutto» per inserire i dettagli in una segnalazione di bug o in una richiesta di assistenza.
Come funziona
I browser riportano le dimensioni in pixel CSS, l'unità usata dalle pagine web per il layout. Sugli schermi ad alta densità, ogni pixel CSS viene disegnato usando più pixel fisici: il rapporto pixel del dispositivo (DPR) indica quanti. Un telefono che riporta 390 × 844 con un DPR di 3 ha un pannello di circa 1170 × 2532 pixel del dispositivo. Sui computer desktop, lo zoom del browser e il ridimensionamento dello schermo del sistema operativo modificano sia il DPR sia le dimensioni in pixel CSS: perciò, un monitor da 2560 × 1440 con ridimensionamento al 125 % riporta 2048 × 1152.
La risoluzione dello schermo corrisponde all'intero display; lo spazio disponibile esclude le barre permanenti del sistema operativo, come la barra delle applicazioni di Windows o la barra dei menu di macOS; il viewport è l'area della finestra del browser in cui viene visualizzata la pagina, senza le barre degli strumenti ma con l'eventuale barra di scorrimento. È il viewport a determinare il comportamento delle media query CSS come min-width: 768px, quindi è il valore da controllare quando si testano layout responsive.
La combinazione di colori e le impostazioni per la riduzione delle animazioni provengono dalle stesse funzionalità media CSS usate dai siti web per adattarsi alle impostazioni di sistema. Il brand, la piattaforma e i dati sul dispositivo mobile provengono da User-Agent Client Hints, disponibili solo nei browser basati su Chromium. Alcuni browser arrotondano o fissano intenzionalmente questi valori per rendere più difficile il fingerprinting, quindi potrebbero non corrispondere esattamente al tuo hardware.
Esempi
Testare un layout responsive
Un layout non funziona sul portatile di un collega. Il collega copia i dettagli, che mostrano un viewport di 1280 × 649 con DPR 1.5. Imposta la stessa dimensione del viewport nella barra degli strumenti del browser dedicata ai dispositivi per riprodurre il problema.
Scegliere le dimensioni delle immagini
Un'immagine di prodotto viene visualizzata con una larghezza di 400 pixel CSS. Su un telefono con DPR 3 servono 1200 pixel perché appaia nitida: così puoi decidere quali dimensioni includere in srcset.
Verificare il ridimensionamento del monitor
Un monitor da 3840 × 2160 riporta 2560 × 1440 con DPR 1.5: Windows sta ridimensionando lo schermo al 150 %.
Domande frequenti
Perché la risoluzione dello schermo è diversa da quella dichiarata per il mio monitor?
I browser riportano i pixel CSS, cioè i pixel fisici divisi per il fattore di ridimensionamento. Moltiplicali per il rapporto pixel del dispositivo per ottenere una stima della risoluzione hardware. Anche lo zoom del browser modifica il valore riportato.
Qual è la differenza tra le dimensioni dello schermo e quelle del viewport?
Le dimensioni dello schermo si riferiscono all'intero display. Il viewport è solo l'area della finestra del browser in cui viene disegnata la pagina: è quindi più piccolo e cambia quando ridimensioni la finestra o apri gli strumenti per sviluppatori.
Queste informazioni vengono usate per tracciarmi?
Non da questa pagina: i valori vengono mostrati solo a te e non vengono memorizzati né inviati altrove. I siti web possono leggere gli stessi valori; per questo alcuni browser li arrotondano per rendere più difficile il fingerprinting.
Perché il mio portatile risulta dotato di touchscreen?
Il supporto al touchscreen si basa sul numero di punti di contatto riportato dal browser. I portatili con touchscreen li riportano anche se usi principalmente il mouse; inoltre, alcuni driver o configurazioni di desktop remoto segnalano il supporto al touchscreen anche quando non è presente uno schermo tattile.
Privacy
Tutti i valori vengono letti da JavaScript nel browser e mostrati solo a te. Non vengono memorizzati, caricati o inclusi nelle statistiche; viene registrato solo un evento anonimo che indica che lo strumento è stato aperto e usato.