Démystification de l'API Visual Viewport : Révélation des informations sur la fenêtre d'affichage de mise en page

L'API Visual Viewport est un outil puissant pour les développeurs web qui souhaitent créer des expériences web véritablement réactives et adaptables. Elle vous permet d'accéder et de manipuler par programmation la fenêtre d'affichage visuelle – la portion d'une page web qui est actuellement visible pour l'utilisateur. Bien que la fenêtre d'affichage visuelle elle-même soit la zone directement visible, l'API fournit également des informations cruciales sur la fenêtre d'affichage de mise en page, qui représente l'ensemble de la page web, y compris les zones qui sont actuellement hors écran. La compréhension de la fenêtre d'affichage de mise en page est essentielle pour de nombreuses techniques avancées de développement web, en particulier lorsqu'il s'agit d'appareils mobiles et de tailles d'écran variables.

Qu'est-ce que la fenêtre d'affichage de mise en page ?

La fenêtre d'affichage de mise en page est, conceptuellement, la toile complète sur laquelle votre page web est rendue. Elle est généralement plus grande que la fenêtre d'affichage visuelle, en particulier sur les appareils mobiles. Le navigateur utilise la fenêtre d'affichage de mise en page pour déterminer la taille et l'échelle initiales de la page. Considérez-la comme la taille du document sous-jacent avant l'application de tout zoom ou défilement. La fenêtre d'affichage visuelle, quant à elle, est la fenêtre à travers laquelle l'utilisateur visualise la fenêtre d'affichage de mise en page.

La relation entre les fenêtres d'affichage visuelle et de mise en page est définie par la balise meta viewport dans votre HTML. Sans une balise meta viewport correctement configurée, les navigateurs mobiles peuvent rendre votre site web comme s'il était conçu pour un écran beaucoup plus petit, forçant l'utilisateur à zoomer pour lire le contenu. Cela conduit à une mauvaise expérience utilisateur.

Par exemple, considérez un site web conçu avec une fenêtre d'affichage de mise en page de 980 pixels de large. Sur un appareil mobile avec une largeur d'écran physique de 375 pixels, le navigateur peut initialement rendre la page comme si elle était visualisée sur un écran de 980 pixels de large. L'utilisateur devrait alors zoomer pour voir le contenu clairement. Avec l'API Visual Viewport, vous pouvez accéder à la taille et à la position des deux fenêtres d'affichage, ce qui vous permet d'ajuster dynamiquement votre mise en page et votre style pour optimiser l'expérience pour l'appareil de l'utilisateur.

Accéder aux informations de la fenêtre d'affichage de mise en page avec l'API Visual Viewport

L'API Visual Viewport fournit plusieurs propriétés qui vous permettent de récupérer des informations sur la fenêtre d'affichage de mise en page. Ces propriétés sont disponibles via l'objet window.visualViewport (assurez-vous de vérifier la prise en charge du navigateur avant de l'utiliser) :

• offsetLeft: La distance (en pixels CSS) entre le bord gauche de la fenêtre d'affichage de mise en page et le bord gauche de la fenêtre d'affichage visuelle.
• offsetTop: La distance (en pixels CSS) entre le bord supérieur de la fenêtre d'affichage de mise en page et le bord supérieur de la fenêtre d'affichage visuelle.
• pageLeft: La coordonnée x (en pixels CSS) du bord gauche de la fenêtre d'affichage visuelle par rapport à l'origine de la page. Remarque : cette valeur peut inclure le défilement.
• pageTop: La coordonnée y (en pixels CSS) du bord supérieur de la fenêtre d'affichage visuelle par rapport à l'origine de la page. Remarque : cette valeur peut inclure le défilement.
• width: La largeur (en pixels CSS) de la fenêtre d'affichage visuelle.
• height: La hauteur (en pixels CSS) de la fenêtre d'affichage visuelle.
• scale: Le facteur de zoom actuel. Une valeur de 1 indique aucun zoom. Les valeurs supérieures à 1 indiquent un zoom avant, et les valeurs inférieures à 1 indiquent un zoom arrière.

Bien que ces propriétés soient directement liées à la fenêtre d'affichage *visuelle*, elles sont cruciales pour comprendre la relation entre les fenêtres d'affichage visuelle et de mise en page. Connaître l'échelle, offsetLeft et offsetTop vous permet de déduire des informations sur la taille et la position globales de la fenêtre d'affichage de mise en page par rapport à la fenêtre d'affichage visuelle. Par exemple, vous pouvez calculer les dimensions de la fenêtre d'affichage de mise en page à l'aide de la formule suivante (bien qu'il faille savoir qu'il s'agit d'une *approximation*) :

 
 layoutViewportWidth = visualViewport.width / visualViewport.scale;
 layoutViewportHeight = visualViewport.height / visualViewport.scale;
 
 

Gardez à l'esprit que ces calculs sont des approximations et peuvent ne pas être parfaitement précis en raison des implémentations du navigateur et d'autres facteurs. Pour connaître la taille précise de la fenêtre d'affichage de mise en page, utilisez `document.documentElement.clientWidth` et `document.documentElement.clientHeight`.

Exemples pratiques et cas d'utilisation

Explorons quelques scénarios pratiques où la compréhension des informations de la fenêtre d'affichage de mise en page est inestimable :

1. Mise à l'échelle et adaptation dynamique du contenu

Imaginez que vous construisez une application web qui doit afficher de grandes images ou des cartes interactives. Vous voulez vous assurer que le contenu tient toujours dans la zone d'écran visible, quel que soit l'appareil ou le niveau de zoom. En accédant aux propriétés width, height et scale de la fenêtre d'affichage visuelle, vous pouvez ajuster dynamiquement la taille et le positionnement de votre contenu pour éviter le débordement ou le recadrage. Ceci est particulièrement important pour les applications monopages (SPA) qui reposent fortement sur JavaScript pour le rendu.

Exemple :

function adjustContent() {
 if (!window.visualViewport) return;
 const visualViewportWidth = window.visualViewport.width;
 const visualViewportHeight = window.visualViewport.height;
 const visualViewportScale = window.visualViewport.scale;

 const contentElement = document.getElementById('myContent');

 // Calculate the desired width and height based on the visual viewport
 const desiredWidth = visualViewportWidth / visualViewportScale;
 const desiredHeight = visualViewportHeight / visualViewportScale;

 // Apply the styles
 contentElement.style.width = desiredWidth + 'px';
 contentElement.style.height = desiredHeight + 'px';
}

// Call adjustContent on initial load and when the visual viewport changes
adjustContent();
window.visualViewport.addEventListener('resize', adjustContent);

Cet extrait de code récupère les dimensions et l'échelle de la fenêtre d'affichage visuelle et les utilise pour calculer la largeur et la hauteur souhaitées pour un élément de contenu. Il applique ensuite ces styles à l'élément, en s'assurant qu'il tient toujours dans la zone d'écran visible. L'écouteur d'événements resize garantit que le contenu est réajusté chaque fois que la fenêtre d'affichage visuelle change (par exemple, en raison d'un zoom ou de changements d'orientation).

2. Mise en œuvre d'une fonctionnalité de zoom personnalisée

Bien que les navigateurs offrent une fonctionnalité de zoom intégrée, vous pouvez implémenter des commandes de zoom personnalisées pour une expérience utilisateur plus personnalisée. Par exemple, vous pouvez créer des boutons de zoom qui effectuent un zoom avant par incréments spécifiques ou implémenter un curseur de zoom. L'API Visual Viewport vous permet d'accéder et de manipuler le niveau de zoom (scale) par programmation.

Exemple :

function zoomIn() {
 if (!window.visualViewport) return;
 const currentScale = window.visualViewport.scale;
 const newScale = currentScale + 0.2; // Increase zoom by 20%

 // Limit the maximum zoom level
 if (newScale <= 5) {
 window.visualViewport.scale = newScale;
 }
}

function zoomOut() {
 if (!window.visualViewport) return;
 const currentScale = window.visualViewport.scale;
 const newScale = currentScale - 0.2; // Decrease zoom by 20%

 // Limit the minimum zoom level
 if (newScale >= 0.2) {
 window.visualViewport.scale = newScale;
 }
}

// Attach these functions to zoom buttons
document.getElementById('zoomInButton').addEventListener('click', zoomIn);
document.getElementById('zoomOutButton').addEventListener('click', zoomOut);

Cet extrait de code définit deux fonctions, zoomIn et zoomOut, qui augmentent ou diminuent le niveau de zoom d'un montant fixe. Il comprend également des limites pour empêcher l'utilisateur de zoomer trop loin ou de dézoomer trop. Ces fonctions sont ensuite attachées à des boutons, permettant à l'utilisateur de contrôler le niveau de zoom via des commandes personnalisées.

3. Création d'expériences immersives pour les cartes et les jeux

Les cartes et les jeux basés sur le web nécessitent souvent un contrôle précis de la fenêtre d'affichage et de la mise à l'échelle. L'API Visual Viewport fournit les outils nécessaires pour créer des expériences immersives en vous permettant d'ajuster dynamiquement la fenêtre d'affichage en fonction des interactions de l'utilisateur. Par exemple, dans une application de carte, vous pouvez utiliser l'API pour effectuer un zoom avant et arrière en douceur sur la carte lorsque l'utilisateur fait défiler ou pince l'écran.

4. Gestion des éléments à position fixe

Les éléments avec position: fixed sont positionnés par rapport à la fenêtre d'affichage. Lorsque l'utilisateur zoome, la fenêtre d'affichage visuelle rétrécit, mais l'élément fixe peut ne pas s'ajuster correctement si vous n'utilisez que du CSS. L'API Visual Viewport peut aider à ajuster la position et la taille des éléments fixes pour les maintenir cohérents avec la fenêtre d'affichage visuelle.

5. Résolution des problèmes de clavier sur les appareils mobiles

Sur les appareils mobiles, l'affichage du clavier redimensionne souvent la fenêtre d'affichage visuelle, obscurcissant parfois les champs de saisie ou d'autres éléments d'interface utilisateur importants. En écoutant l'événement resize de la fenêtre d'affichage visuelle, vous pouvez détecter quand le clavier est affiché et ajuster la mise en page en conséquence pour vous assurer que les champs de saisie restent visibles. Ceci est crucial pour fournir une expérience transparente et conviviale sur les appareils mobiles. Ceci est vital pour adhérer aux directives WCAG également.

Exemple :

window.visualViewport.addEventListener('resize', () => {
 const keyboardVisible = window.visualViewport.height < window.innerHeight;

 if (keyboardVisible) {
 // Adjust the layout to ensure the input field is visible
 document.getElementById('myInputField').scrollIntoView();
 } else {
 // Revert the layout adjustments
 }
});

Cet exemple vérifie si la hauteur de la fenêtre d'affichage visuelle est inférieure à la hauteur de la fenêtre, ce qui indique que le clavier est probablement visible. Il utilise ensuite la méthode scrollIntoView() pour faire défiler le champ de saisie dans la vue, en s'assurant qu'il n'est pas obscurci par le clavier. Lorsque le clavier est fermé, les ajustements de la mise en page peuvent être annulés.

Prise en charge des navigateurs et considérations

L'API Visual Viewport bénéficie d'une bonne prise en charge dans les navigateurs modernes. Cependant, il est crucial de vérifier la prise en charge du navigateur avant de l'utiliser dans votre code. Vous pouvez le faire en vérifiant si l'objet window.visualViewport existe. Si l'API n'est pas prise en charge, vous pouvez utiliser d'autres techniques, telles que les requêtes média ou window.innerWidth et window.innerHeight, pour obtenir des résultats similaires, bien que ces méthodes puissent ne pas être aussi précises.

Exemple :

if (window.visualViewport) {
 // Use the Visual Viewport API
} else {
 // Use alternative techniques
}

Il est également important d'être conscient des implications potentielles sur les performances de l'utilisation de l'API Visual Viewport. L'accès aux propriétés de la fenêtre d'affichage et la réaction aux changements de la fenêtre d'affichage peuvent déclencher des reflows de mise en page, ce qui peut avoir un impact sur les performances, en particulier sur les appareils mobiles. Optimisez votre code pour minimiser les reflows inutiles et assurer une expérience utilisateur fluide. Envisagez d'utiliser des techniques telles que le debouncing ou la limitation de la fréquence pour limiter la fréquence des mises à jour.

Considérations relatives à l'accessibilité

Lorsque vous utilisez l'API Visual Viewport, il est essentiel de tenir compte de l'accessibilité. Assurez-vous que votre site web reste utilisable et accessible aux utilisateurs handicapés, quel que soit leur appareil ou leur niveau de zoom. Évitez de vous fier uniquement aux repères visuels et fournissez d'autres moyens aux utilisateurs d'interagir avec votre contenu. Par exemple, si vous utilisez des commandes de zoom personnalisées, fournissez des raccourcis clavier ou des attributs ARIA pour les rendre accessibles aux utilisateurs qui ne peuvent pas utiliser une souris. L'utilisation correcte des balises meta viewport et de l'API Visual Viewport peut améliorer la lisibilité pour les utilisateurs malvoyants en leur permettant de zoomer sans casser la mise en page.

Internationalisation et localisation

Tenez compte de l'impact des différentes langues et paramètres régionaux sur la mise en page et la réactivité de votre site web. La longueur du texte peut varier considérablement d'une langue à l'autre, ce qui peut affecter la taille et le positionnement des éléments sur la page. Utilisez des mises en page flexibles et des techniques de conception réactive pour vous assurer que votre site web s'adapte gracieusement aux différentes langues. L'API Visual Viewport peut être utilisée pour détecter les changements de taille de la fenêtre d'affichage dus au rendu de texte spécifique à la langue et ajuster la mise en page en conséquence.

Par exemple, dans les langues comme l'allemand, les mots ont tendance à être plus longs, ce qui peut entraîner des problèmes de mise en page si cela n'est pas géré correctement. Dans les langues de droite à gauche (RTL) comme l'arabe ou l'hébreu, toute la mise en page doit être mise en miroir. Assurez-vous que votre code est correctement internationalisé et localisé pour prendre en charge un public mondial.

Meilleures pratiques et conseils

• Vérifiez la prise en charge du navigateur : Vérifiez toujours si l'API Visual Viewport est prise en charge avant de l'utiliser.
• Optimisez les performances : Minimisez les reflows de mise en page inutiles pour éviter les problèmes de performances.
• Tenez compte de l'accessibilité : Assurez-vous que votre site web reste accessible aux utilisateurs handicapés.
• Testez sur différents appareils : Testez votre site web sur une variété d'appareils et de tailles d'écran pour vous assurer qu'il est vraiment réactif.
• Utilisez le debouncing et la limitation de la fréquence : Limitez la fréquence des mises à jour pour améliorer les performances.
• Priorisez l'expérience utilisateur : Gardez toujours l'expérience utilisateur à l'esprit lorsque vous utilisez l'API Visual Viewport.

Conclusion

L'API Visual Viewport fournit un ensemble d'outils puissants pour créer des expériences web réactives et adaptables. En comprenant la fenêtre d'affichage de mise en page et en utilisant les propriétés de l'API, vous pouvez créer des sites web qui ont une belle apparence et fonctionnent parfaitement sur n'importe quel appareil. N'oubliez pas de tenir compte de la prise en charge du navigateur, des performances, de l'accessibilité et de l'internationalisation lorsque vous utilisez l'API pour vous assurer que votre site web offre une expérience positive à tous les utilisateurs du monde entier. Expérimentez avec l'API, explorez ses capacités et débloquez de nouvelles possibilités pour créer des applications web engageantes et immersives.

Exploration plus approfondie : Explorez d'autres fonctionnalités de l'API Viewport comme les événements de défilement, les événements tactiles et l'intégration avec d'autres API web.