Viewport size e orientation

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

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

JavaScriptCopia

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

mentre il DPR può essere letto da window.devicePixelRatio

JavaScriptCopia

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:

JavaScriptCopia

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.

JavaScriptCopia

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).

JavaScriptCopia

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

JavaScriptCopia

console.log(screen.colorDepth);
console.log(screen.pixelDepth);

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:

• 0° Portrait dispositivo in verticale
• 90° Landscape sinistra, ruotato in senso antiorario
• 180° Portrait dispositivo in verticale rovesciato
• 270° Landscape destra, ruotato in senso orario

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

JavaScriptCopia

var isScreenOrientation = screen.orientation !== undefined;

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

console.log(angle);

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

JavaScriptCopia

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:

JavaScriptCopia

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.