Che cos'è l'area visibile virtuale?

Matt Gaunt

In Chrome M40 è stata apportata una modifica all'area visibile, che è piuttosto discreta, ma dovrebbe fare una grande differenza per gli utenti.

All'inizio dei browser mobile, la mancanza di un meta tag dell'area visibile faceva sì che la pagina web ritenga di avere circa 980 px di spazio sullo schermo e che venga visualizzata con queste dimensioni. Con un meta tag dell'area visibile, gli sviluppatori possono definire la larghezza, la più comune è "device-width", che imposta le dimensioni dello schermo su quelle del dispositivo. Puoi scoprire di più su Web Fundamentals.

Rick Byers descrive l'area visibile virtuale come segue: l'idea di suddividere l'area visibile virtuale consiste nel suddividere la nozione di "viewport" in due, ovvero "l'area visibile del layout" (dove sono allegati elementi con posizione fissa) e "l'area visibile visiva" (l'area visibile effettivamente dagli utenti).

Esempio super semplice

Il sito web videojs.com è un buon esempio perché la barra delle app è fissata in alto e contiene link sia a sinistra che a destra.

La seguente immagine mostra ciò che vedresti se aumentassi lo zoom su un sito e provassi a eseguire la panoramica a sinistra e a destra.

I dispositivi principali sono Chrome M39, che non ha un'area visibile virtuale, mentre i tre inferiori sono di Chrome M40, che ha un'area visibile virtuale.

Rendering pixelato.
Rendering pixelato.

In Chrome M39 viene visualizzata la barra delle app dopo aver aumentato lo zoom, ma se scorri verso destra non puoi visualizzare i link sul lato destro della barra, vedrai sempre solo il logo.

Confrontando questa impostazione con Chrome M40 (che ha un'"area visibile virtuale"), noterai che l'"area visibile visiva" fa scorrere tutti gli elementi all'interno dell'"area visibile del layout", consentendoti di vedere i link a destra.

Internet Explorer già adotta questo comportamento e queste modifiche ci sono più strettamente legate.

html

L'unica modifica importante per gli sviluppatori che ne deriva è che nella versione M39 è possibile applicare l'overflow: nascosto all'elemento HTML e la pagina scorrerebbe comunque, in M40 non è più supportato, la pagina semplicemente non scorrerà.

Più informazioni solide

Vuoi saperne di più, eh?

Bene, puoi vedere la presentazione qui sotto.