Dans Chrome M40, le viewport a subi un changement assez subtil, mais qui devrait avoir un impact important pour les utilisateurs.
Lorsque les navigateurs mobiles ont vu le jour, l'absence de balise meta viewport faisait croire à la page Web qu'elle disposait d'environ 980 px d'espace sur l'écran et l'affichait à cette taille. Avec une balise meta viewport, les développeurs peuvent définir la largeur, la plus courante étant "device-width", qui définit la taille de l'écran sur celle de l'appareil. Pour en savoir plus sur Web Fundamentals, cliquez ici.
Rick Byers décrit la vue d'affichage virtuelle comme suit : l'idée de la vue d'affichage virtuelle est de diviser la notion de "vue d'affichage" en deux : "vue d'affichage de mise en page" (où les éléments de position fixe sont associés) et "vue d'affichage visuelle" (ce que les utilisateurs voient réellement).
Exemple très simple
Le site Web videojs.com est un bon exemple, car son application bar est fixée en haut et comporte des liens à gauche et à droite.
L'image ci-dessous montre ce que vous verriez si vous zoomiez sur un site et essayiez de faire un panoramique à gauche et à droite.
Les appareils en haut de la liste utilisent Chrome M39, qui ne dispose pas de vue d'affichage virtuelle. Les trois appareils en bas de la liste utilisent Chrome M40, qui dispose d'une vue d'affichage virtuelle.
Dans Chrome M39, l'application bar s'affiche après avoir fait un zoom avant, mais le défilement vers la droite ne vous permet pas d'afficher les liens sur le côté droit de la barre. Vous ne verrez que le logo.
Comparez cela à Chrome M40 (qui dispose d'un"viewport virtuel") et vous constaterez que le "viewport visuel" fait défiler tout ce qui se trouve dans le "viewport de mise en page", ce qui vous permet de voir les liens sur la droite.
Internet Explorer présente déjà ce comportement, et ces modifications nous rapprochent davantage de celui-ci.
html
Le seul changement majeur pour les développeurs est que, dans M39, vous pouviez appliquer overflow: hidden à l'élément HTML et votre page continuait de défiler. Dans M40, cette fonctionnalité n'est plus disponible, la page ne défile plus.
Informations plus fiables
Vous voulez en savoir plus ?
Vous pouvez donc consulter la présentation ci-dessous.