In Chrome M40 è stata apportata una modifica al viewport piuttosto sottile, ma che dovrebbe fare una grande differenza per gli utenti.
All'inizio, la mancanza di un meta tag viewport faceva pensare alla pagina web che lo schermo avesse circa 980 px di spazio e la pagina veniva visualizzata in queste dimensioni. Con un meta tag viewport, gli sviluppatori possono definire la larghezza, la più comune delle quali è "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 è suddividere il concetto di "area visibile" in due, "area visibile del layout" (dove sono collegati gli elementi in posizione fissa) e "area visibile" (ciò che gli utenti vedono effettivamente).
Esempio molto semplice
Il sito web videojs.com è un buon esempio perché la sua appbar è fissata in alto e presenta link sia sul lato sinistro sia su quello destro.
L'immagine di seguito mostra cosa vedresti se aumenti lo zoom di un sito e provi a eseguire la panoramica verso sinistra e verso destra.
I dispositivi in alto sono Chrome M39, che non ha un viewport virtuale, mentre i tre in basso sono di Chrome M40, che ha un viewport virtuale.
In Chrome M39, vedrai la barra delle app dopo aver aumentato lo zoom, ma lo scorrimento verso destra non ti consente di visualizzare i link sul lato destro della barra, vedrai solo il logo.
Confrontalo con Chrome M40 (che ha una "visual viewport") e vedrai che la "visual viewport " scorre tutto all'interno della "layout viewport", consentendoti di visualizzare i link a destra.
Internet Explorer ha già questo comportamento e queste modifiche ci avvicinano maggiormente a questo browser.
html
L'unica modifica significativa per gli sviluppatori è che in M39 potevi applicare overflow: hidden all'elemento HTML e la pagina continuava a scorrere, mentre in M40 questa opzione non è più supportata e la pagina non scorre.
Informazioni più solide
Vuoi saperne di più?
Puoi visualizzare la presentazione di seguito.