Un utility per visualizzare l'attuale dimensione della Viewport del client

Viewport size

attendi...

Screen size: -

Device Pixel Ratio (DPR): -

Device resolution: -

Window
Outer (W x H) -
Inner (W x H) -
Outer - inner (W x H) -
Screen
size (W x H) -
Avail (X x Y) -
Avail (W x H) -
Color dept -
Pixel dept -
Orientation angle -
Orientation type -
Orientation description -
Immagine di test

Descrizione dei valori

La viewport è l'area della pagina web disponibile per la visualizzazione espressa in pixel. In base al dispositivo può essere uguale o inferiore alla dimensione dello schermo (screen size).

Nei dispositivi mobili la risoluzione (larghezza x altezza) può essere diversa dalla risoluzione effettiva dello schermo (device resolution), il parametro che esprime la differenza è Device Pixel Ratio (DPR).
La dimensione della viewport moltiplicata con il DPR da la risoluzione reale del dispositivo. Il valore 1 indica che la viewport e la risoluzione dello schermo coincidono (tipicamente è il caso dei PC).

Lato JavaScript la dimensione della viewport può essere ricavata dalle proprietà: document.documentElement.clientWidth e document.documentElement.clientHeight
JavaScript
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
mentre il DPR può essere letto da window.devicePixelRatio
JavaScript
console.log(window.devicePixelRatio);

Window

La tabella riporta i valori relativi alla finestra (window) del client.
I valori Outer si riferiscono alla dimensione totale della finestra corrente, sempre espressi in pixel, mentre i valori Inner si riferiscono alle dimensioni dell'area interna disponibile per la pagine HTML.
La dimensione interna si riferisce alla dimensione, tolti: i bordi, il menu, le eventuali barre di scorrimento e l'eventuale developer toolbar.
Infine la voce Outer - inner indica la differenza in pixel tra le dimensioni esterne (outer) e quelle interne (inner).

In JavaScript i valori possono essere letti dall'oggetto window:
JavaScript
console.log(window.outerWidth);
console.log(window.outerHeight);
console.log(window.innerWidth);
console.log(window.innerHeight);

Screen

Gli altri valori riportati in tabella si riferiscono allo schermo (screen).

I valori di Size coincidono con lo Screen size riportata nel riquadro, e si riferiscono alla risoluzione dello schermo non alla risoluzione fisica del dispositivo.
JavaScript
console.log(screen.width);
console.log(screen.height);

I valori di Avail riportano la posizione della coordinata X (Left) e Y (Top) dell'angolo in alto a sinistra della finestra e alla dimensione della finestra larghezza (Width) e altezza (Height).
Sui dispositivi mobili che non hanno il concetto di finestra, le dimensioni X e Y saranno sempre a 0, mentre le dimensioni (Width e Height) coincidono con le dimensioni dello schermo (screen size).
JavaScript
console.log(screen.availLeft);
console.log(screen.availTop);
console.log(screen.availWidth);
console.log(screen.availHeight);

Gli altri valori Color dept e Pixel dept si riferiscono al numero di colori supportato dal dispositivo, ad esempio: 24 bits = 2^24 = 16.777.216 colori
JavaScript
console.log(screen.colorDepth);
console.log(screen.pixelDepth);
Le due proprietà hanno senso solo sui vecchi browser, colorDepth è il numero di colori gestito dal browser, mentre pixelDepth corrisponde al numero di colori visualizzabili dall'hardware (display/monitor).

Le altre informazioni riportate si riferiscono all'orientamento del dispositivo.
Il primo parametro è l'angolo di rotazione espresso in gradi e ritorna questi 4 valori:
  • Portrait dispositivo in verticale
  • 90° Landscape sinistra, ruotato in senso antiorario
  • 180° Portrait dispositivo in verticale rovesciato
  • 270° Landscape destra, ruotato in senso orario
Portrait = ritratto, Landscape = paesaggio
Per leggere questo valore in JavaScript bisogna basarsi su due proprietà.
La prima è screen.orientation.angle, supportata da tutti i browser, mentre in Safari va usato window.orientation
JavaScript
var isScreenOrientation = screen.orientation !== undefined;

var angle = isScreenOrientation ? screen.orientation.angle : window.orientation;

console.log(angle);
window.orientation ritorna -90 anziché 270
Testato su Chrome, Firefox, Edge (Chromium), Safari su IPAD e Android. Non funziona con Internet Explorer.

La voce Orientation type non viene ritornata da Safari, mentre la voce Orientation description viene ricavata con questa funzione JavaScript passandogli il valore dell'angolo
JavaScript
function getOrientation(angle) {
    switch (angle) {
        case 0:
            return "Portrait (dispositivo in verticale)";
        case -90:
        case 270:   // usato solo con screen.orientation.angle
            return "Landscape (destra, ruotato in senso orario)";
        case 90:
            return "Landscape (sinistra, ruotato in senso antiorario)";
        case 180:
        case -180:  // non dovrebbe mai accadere, messo solo per sicurezza
            return "Portrait (dispositivo in verticale rovesciato)";
        default:
            return "?";
    }
}
Se serve, è possibile sottoscrivere un evento orientationchange per ricevere la notifica del cambio di orientamento:
JavaScript
window.addEventListener("orientationchange", function(event) {
    var isScreenOrientation = screen.orientation !== undefined;
    var angle = isScreenOrientation ? screen.orientation.angle : window.orientation;
    console.log(angle);
});

Immagine di test

L'immagine di test ha il solo scopo di far vedere come viene visualizzata un immagine di 300 x 300 pixel nel caso il dispositivo non avesse un rapporto larghezza altezza simmetrico.
Potrebbe interessarti anche: