Qu'est-ce que la fenêtre d'affichage virtuelle ?

Dans Chrome M40, la fenêtre d'affichage a été modifiée. Cette modification est assez subtile, mais elle devrait faire une grande différence pour les utilisateurs.

Au départ, l'absence de balise Meta de fenêtre d'affichage faisait croire à la page Web qu'elle avait environ 980 pixels de surface à l'écran et s'affichait à cette taille en l'absence de balise Meta de fenêtre d'affichage. Avec une balise Meta de fenêtre d'affichage, les développeurs peuvent définir la largeur, dont la plus courante est "device-width", qui définit la taille de l'écran sur celle de l'appareil. Pour en savoir plus, consultez le site Web Fundamentals.

Rick Byers décrit la fenêtre d'affichage virtuelle comme suit : l'idée de la fenêtre d'affichage virtuelle est de diviser la notion de "fenêtre d'affichage" en deux : "fenêtre d'affichage de mise en page" (où les éléments fixes sont associés) et "la fenêtre d'affichage visuelle" (ce que les utilisateurs voient réellement).

Exemple très simple

Le site Web videojs.com en est un bon exemple, car sa barre d'application est fixe en haut et comporte des liens à gauche et à droite de cette barre.

L'image ci-dessous montre ce que vous verriez si vous faisiez un zoom avant sur un site et essayiez un panoramique vers la gauche et vers la droite.

Les appareils du haut sont Chrome M39, qui n'a pas de fenêtre d'affichage virtuelle, et les trois du bas proviennent de Chrome M40, qui dispose d'une fenêtre d'affichage virtuelle.

Rendu pixélisé.
Rendu pixélisé.

Dans Chrome M39, vous verrez la barre d'application 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'une "fenêtre d'affichage virtuelle") et vous verrez que la "fenêtre d'affichage visuelle" fait défiler tout ce qui se trouve à l'intérieur de la "fenêtre d'affichage de mise en page", ce qui vous permet d'afficher les liens sur la droite.

Internet Explorer a déjà adopté ce comportement, et ces modifications nous rapprochent davantage de ceux-ci.

html

Le seul changement majeur apporté par les développeurs à cette fonctionnalité est que, dans M39, vous pouvez appliquer le dépassement: masqué à l'élément HTML et que votre page continue de défiler. Dans M40, cette fonctionnalité n'est plus prise en charge, la page ne défile tout simplement pas.

Plus d'informations fiables

Vous voulez en savoir plus, n'est-ce pas ?

Eh bien, vous pouvez voir la diaporama ci-dessous.