Verifica Risoluzione Schermo
Viewport, Rapporto E Densità Di Pixel

Che cosa fa per te una verifica risoluzione schermo

I numeri dello schermo si nascondono spesso in tre posti diversi. Infatti il tuo sistema conosce una dimensione, la finestra del browser ne conosce un’altra e la tua pagina ne vede una terza. Così una verifica risoluzione schermo mette tutte e tre una accanto all’altra e poi gli scarti fra loro acquistano finalmente senso.

Prima di tutto, non c’è niente da impostare. La pagina legge ogni valore nel momento in cui si carica, quindi la dimensione dello schermo, il viewport e il rapporto di pixel stanno sullo schermo prima che tu tocchi qualcosa.

Inoltre quattro pannelli condividono una pagina. Di conseguenza puoi passare dalla semplice dimensione dello schermo al rapporto d’aspetto, alla densità di pixel e alla frequenza senza lasciare la scheda.

In ogni caso tutto gira nel tuo browser. Così nessuna di queste letture raggiunge questo sito e noi non memorizziamo nulla.

Come funziona la verifica risoluzione schermo

Per prima cosa lo strumento chiede al browser l’oggetto screen. Poi misura la finestra stessa. Infine divide l’uno per l’altra, così il rapporto di pixel e il conteggio dei pixel nativi escono dalle stesse due letture.

Infatti lo strumento non indovina niente. Ogni riga arriva da una proprietà documentata del browser, quindi puoi controllarle una per una in una console, se vuoi.

Qual è la risoluzione del mio schermo?

La coppia in evidenza è spesso quella per cui arriva la maggior parte delle persone. Così in cima alla pagina compaiono la larghezza e l’altezza del tuo schermo, scritte come le scrive una scheda tecnica, per esempio 1920 per 1080.

Quella coppia arriva poi dall’oggetto screen che il tuo browser espone. Il browser conta in pixel CSS, quindi un portatile con un pannello nitido mostra spesso un numero più basso di quello sulla scatola.

Pixel CSS e pixel nativi

In ogni display moderno vivono due conteggi di pixel. Il pixel CSS è l’unità di cui parla il tuo foglio di stile; il pixel nativo, invece, è un punto reale nel pannello.

Così lo strumento moltiplica la dimensione CSS per il rapporto di pixel del dispositivo e poi stampa sotto la dimensione nativa. Per esempio uno schermo 1512 per 982 con un rapporto di due contiene davvero 3024 per 1964 punti. La pagina MDN su window.devicePixelRatio espone la regola che i browser seguono.

L’area disponibile dello schermo

Spesso il tuo schermo non è tutto tuo. Una barra delle applicazioni, un dock o una barra dei menu tiene una striscia, quindi il browser riporta anche una larghezza e un’altezza disponibili.

Lo strumento mostra entrambe le coppie, così la differenza ti dice quanto arredo trattiene il tuo desktop. Su un telefono le due coppie spesso coincidono, mentre su un desktop capita raramente.

Profondità di colore e orientamento

Due letture più piccole stanno nello stesso pannello. La profondità di colore conta i bit per pixel e infatti quasi ogni display oggi risponde ventiquattro.

L’orientamento dice se stai in verticale o in orizzontale e dà anche l’angolo. Perciò un tablet che giri aggiorna entrambe le righe in una volta, come descrive la pagina MDN su screen.orientation.

Un controllo della dimensione del viewport nella stessa pagina

Il viewport è infatti la parte della finestra in cui la tua pagina può davvero disegnare. Così il secondo pannello la misura direttamente e poi mette quel valore accanto alla dimensione dello schermo sopra.

Qui compaiono quindi due letture. La finestra dà una larghezza; l’elemento del documento, invece, ne dà un’altra, e ogni scarto fra le due è la scrollbar.

A volte, tuttavia, quello scarto è zero. Un browser con scrollbar sovrapposte fa galleggiare la barra sopra la pagina invece di riservarle spazio, quindi il pannello riporta zero pixel, e lo screenshot qui sotto mostra esattamente quel caso.

Perché il viewport è più piccolo dello schermo

L’arredo del browser si mangia infatti il resto. La striscia delle schede, la barra degli indirizzi e la riga dei preferiti stanno tutte sopra la tua pagina, quindi il viewport perde cento pixel di altezza o più.

In questo modo anche la larghezza cala appena compare una scrollbar. Così una finestra ingrandita su uno schermo da 1920 riporta spesso 1905 per il documento, e quei 15 che mancano sono la barra stessa. Le regole dietro entrambe le letture vivono nel CSSOM View Module del W3C.

In quale breakpoint ti trovi

La maggior parte dei siti cambia spesso impaginazione a poche larghezze fisse. Così lo strumento nomina la fascia in cui ti trovi adesso, dal telefono stretto al tablet fino al desktop ampio.

Ridimensiona la finestra e poi l’etichetta ti segue. Perciò puoi vedere esattamente dove un design si ribalta, senza aprire un solo strumento per sviluppatori.

Il viewport visivo su un telefono

Un telefono aggiunge inoltre un altro livello. Quando si apre la tastiera o pizzichi per ingrandire, la parte che vedi si restringe, tuttavia l’impaginazione tiene la sua misura.

Lo strumento riporta quindi quella scatola visibile e accanto la scala dello zoom. Per i dettagli vedi la pagina MDN sull’API VisualViewport.

Rapporto d’aspetto e densità di pixel

Il terzo pannello trasforma poi le tue due dimensioni in forme. Prima riduce la dimensione dello schermo a un rapporto e poi calcola quanto stretti stanno i pixel fra loro.

Entrambi i valori aiutano spesso quando scegli un’immagine o un video. Per esempio un banner 16:9 entra esatto in uno schermo 1920 per 1080, mentre un portatile 16:10 lascia una fascia.

Come lo strumento riduce il rapporto d’aspetto

Un rapporto è infatti solo una frazione ai minimi termini. Così lo strumento divide entrambi i lati per il loro massimo comune divisore e 1920 per 1080 diventa 16:9.

Tuttavia alcune dimensioni non cadono mai su una coppia pulita. Per esempio 1366 per 768 si riduce a 683:384, quindi lo strumento nomina accanto anche il rapporto comune più vicino.

I PPI hanno bisogno della diagonale del tuo monitor

I pixel per pollice, invece, non possono arrivare dal browser. Nessuna pagina web può chiedere a un pannello quanto misura in pollici, quindi il valore resta vuoto finché non digiti tu la diagonale.

Inserisci 27 per un monitor da 27 pollici e poi lo strumento fa il resto. Poi divide la diagonale nativa in pixel per la tua misura, così un pannello 3840 per 2160 a 27 pollici atterra vicino a 163 PPI.

Frequenza di aggiornamento e capacità del display

Infine il quarto pannello chiede che cosa sa fare il tuo display. Così campiona la frequenza di aggiornamento e poi controlla le funzioni di colore e contrasto che il tuo browser ammette.

Ogni riga qui contiene invece una risposta del browser, non una lettura dall’hardware. Perciò il pannello resta onesto su questa differenza.

La frequenza di aggiornamento è una stima

Nessun browser consegna infatti la frequenza di aggiornamento in modo diretto. Lo strumento conta invece i fotogrammi di animazione per circa un secondo e poi arrotonda il conteggio alla frequenza comune più vicina.

Quindi tratta la risposta come vicina, non come esatta. Una scheda occupata o un risparmio di batteria perde fotogrammi, perciò un pannello a 120 Hz a volte riporta 60 mentre si limita. La callback dei fotogrammi dietro il conteggio sta sulla pagina MDN su requestAnimationFrame.

Gamma di colore e gamma dinamica

Due media query rispondono poi alla domanda sul colore. Una chiede se il tuo display copre lo spazio P3 più ampio; l’altra, invece, chiede se gestisce l’alta gamma dinamica.

Un sì qui significa quindi che il tuo browser dichiara quella capacità. Trattalo così come un indizio per una scelta CSS, come suggerisce il riferimento MDN su color-gamut, e non come un rapporto di calibrazione.

Contrasto, movimento e indizi sul puntatore

Lo stesso pannello legge inoltre le preferenze che tieni nel tuo sistema. Così tema scuro, movimento ridotto, contrasto alto e colori forzati hanno ciascuno una riga.

Puntatore e passaggio del mouse completano il quadro, così un touch screen e un mouse appaiono subito diversi. Tutte queste query stanno nella specifica Media Queries Level 5 del W3C.

Che cosa questa verifica risoluzione schermo non può dirti

Uno strumento onesto nomina i suoi limiti. Così ecco le righe che questa pagina non stamperà mai, per quante volte tu la ricarichi.

Il modello del tuo monitor resta quindi sconosciuto, e lo stesso vale per la marca della tua scheda grafica. I pollici fisici hanno bisogno della tua misura; la frequenza di aggiornamento, invece, resta un campione e non una lettura dal pannello.

Copia tutto il rapporto

Un solo pulsante prende quindi tutto. Così premi Copia rapporto e ogni pannello finisce negli appunti come un semplice elenco di etichette e valori.

Quell’elenco si incolla poi diritto in un ticket di bug. Perciò un tester può dire esattamente quale schermo, quale viewport e quale rapporto hanno prodotto un problema di impaginazione.

Sicuro per come è fatto

Lo strumento lavora nel tuo browser. Perciò non invia niente e non memorizza niente. Così le dimensioni che legge, la diagonale che digiti e il rapporto che copi restano tutti sul tuo dispositivo.