Propriétés de l'écran et du viewport pour le responsive design
Comprendre comment les propriétés d'écran, de viewport et de devicePixelRatio soutiennent la mise en page adaptative, les tests et la protection de la vie privée.
Vous voulez la documentation structurée pour Empreinte ?
Cet article fait partie de la bibliothèque éditoriale. Pour les étapes de configuration, la référence et les mises à jour continues, passez directement à la section docs.
Le responsive design doit réagir à l'espace disponible pour la page, sans deviner qui l'utilise. Le viewport est la zone dans laquelle le document est mis en page ; les propriétés d'écran décrivent un contexte d'affichage extérieur à la page. devicePixelRatio relie les pixels CSS aux pixels physiques et peut changer avec le zoom ou les réglages d'affichage. Ces valeurs aident à choisir une mise en page lisible, mais ne constituent pas une identité fiable de l'appareil.
Le viewport et l'écran répondent à des questions différentes
window.innerWidth et window.innerHeight décrivent le viewport de mise en page en pixels CSS. La spécification CSSOM View définit aussi les objets d'écran et la géométrie de la fenêtre, mais chaque valeur doit servir son objectif. Les décisions de mise en page relèvent généralement des media queries CSS et du viewport ; une valeur d'écran peut décrire une zone plus grande, partiellement masquée par l'interface du navigateur ou d'autres fenêtres.
Le viewport visuel peut différer du viewport de mise en page lorsque la page est zoomée ou lorsqu'un clavier à l'écran modifie la zone visible. Traitez ces changements comme des événements normaux. Un écran large ne garantit pas un viewport utilisable large, et deux viewports égaux ne prouvent pas qu'ils viennent du même écran.
Pour la configuration d'affichage associée, consultez le guide écran et fenêtre et la politique de device pixel ratio. Ces pages décrivent les limites de configuration du navigateur ; ce guide concerne la mise en page destinée aux utilisateurs.
Utiliser les propriétés pour des mises en page robustes
Commencez par un contenu et des contrôles utilisables dans un viewport étroit, puis ajoutez colonnes, médias plus grands ou navigation plus dense lorsque l'espace le permet. Les container queries et media queries CSS expriment ces choix sans liste de modèles d'appareils. Les grilles flexibles, les dimensions intrinsèques, les images adaptatives et le texte qui peut revenir à la ligne résistent mieux que des coordonnées fixes.
JavaScript peut observer un besoin précis, comme redimensionner un graphique ou déplacer une boîte de dialogue, avec ResizeObserver ou une correspondance de media query. Gardez la réponse liée au résultat visible. Une mise en page qui demande une région de 640 pixels n'a pas besoin de conserver toutes les dimensions de l'écran. Le guide d'émulation d'appareil aide à tester des viewports représentatifs sans en faire des affirmations d'identité.
Si une valeur est indisponible, retardée ou change après un zoom, préservez la tâche principale. Un menu peut devenir un bouton, un tableau peut défiler et une image peut utiliser une source plus petite. Ne laissez pas une zone vide et ne bloquez pas la lecture parce qu'une mesure préférée manque.
Gérer le zoom et l'orientation
MDN indique que devicePixelRatio peut changer avec le zoom de page ou la configuration d'affichage ; ce n'est pas une étiquette permanente de l'appareil. Le zoom modifie donc le rapport entre pixels CSS et physiques même si la personne reste sur le même ordinateur. Utilisez les pixels CSS pour la mise en page et testez les niveaux de zoom que le produit promet de prendre en charge.
Un changement d'orientation peut redimensionner le viewport et modifier séparément le viewport visuel. Faites refluer titres, contrôles et médias au lieu de supposer des dimensions fixes en portrait et paysage. Conservez le focus et l'état des formulaires, et ne faites pas d'un geste propre à l'orientation l'unique moyen de terminer une action.
Si une capture ou un test de régression visuelle utilise un facteur d'échelle, consignez-le avec le viewport et la version du navigateur. Une autre échelle peut changer les dimensions du bitmap sans changer la mise en page CSS attendue. Comparez les résultats visibles et gardez des références séparées lorsque le test vise volontairement des réglages différents.
Tester des résultats accessibles, pas des catégories d'appareils
Testez des largeurs de viewport, niveaux de zoom, changements d'orientation, entrées clavier et préférences de mouvement réduit. Vérifiez un texte lisible, un focus visible, des cibles utilisables, un contraste suffisant et un ordre compréhensible. Utilisez de vraies longueurs en plus du texte factice ; la localisation et le texte utilisateur révèlent les défauts de retour à la ligne.
Gardez les actions essentielles dans du HTML sémantique. Un canvas ou une amélioration visuelle peut s'adapter, mais navigation, états, libellés et contrôles de récupération doivent rester disponibles pour les technologies d'assistance. Si l'espace est trop petit pour la présentation préférée, fournissez une liste, un tableau ou un contrôle simplifié équivalent plutôt qu'un message qui décrit seulement la taille manquante.
Les propriétés d'écran et de viewport peuvent contribuer à une empreinte du navigateur lorsqu'elles sont largement collectées, mais une mise en page adaptative ne nécessite pas cette collecte. Demandez seulement la mesure nécessaire à la présentation actuelle, gardez-la en mémoire si la persistance est inutile et expliquez tout stockage ou transfert. Ne classez pas une personne ou un appareil selon une largeur, un ratio ou une orientation donnée.
Choisir les points de rupture selon le contenu
La géométrie du viewport décrit la présentation actuelle, pas un catalogue d'appareils. L'interface du navigateur et la mise à l'échelle du système changent aussi ces conditions.
Le serveur peut fournir une présentation initiale prudente, puis le client la mettre à jour sans perdre les données, le focus ou la navigation.
DevicePixelRatio change avec le zoom ; tout rendu qui en dépend doit donc être recalculé après une modification.
Les images de densités différentes doivent garder le même sens et les mêmes contrôles. Le choix d'une ressource ne justifie pas de supprimer une action.
Les mises en page flexibles et les media queries réduisent les points de rupture et le besoin d'envoyer des dimensions.
Avant de transférer une mesure, expliquez sa finalité, sa conservation, son accès et le comportement sans transfert.
Les tests avec texte agrandi doivent vérifier le focus, les boutons et les tableaux, pas seulement la largeur de fenêtre.
Un changement d'orientation doit conserver un défilement utile et annoncer les états importants de manière accessible.
Les composants qui dépendent de l'espace local doivent répondre à leur conteneur pour fonctionner dans des panneaux et des iframes.
Une référence de régression visuelle décrit une configuration de test, pas l'identité de la personne qui l'exécute.
Après une modification, supprimez les propriétés qui ne soutiennent plus une décision utilisateur et documentez les autres.
Ces pratiques gardent la mise en page explicable avec de nouveaux navigateurs et de nouvelles tailles de fenêtre.
Gérer les zones sûres et l'interface temporaire
Les zones sûres, le clavier et les barres du navigateur peuvent réduire temporairement l'espace visible. Traitez-les comme des contraintes de rendu.
Conservez les contrôles sémantiques et un chemin de récupération lorsque cette interface apparaît ou disparaît.
Rendre les décisions de mesure et de confidentialité explicites
Avant de lire une propriété, notez la décision utilisateur qu'elle soutient. Un calcul local bref et la conservation de toutes les dimensions sont deux pratiques différentes.
Limitez la collecte aux champs qui changent réellement la présentation demandée.
Documenter une matrice de test pratique
Notez l'état du contenu, la plage du viewport, le zoom, l'orientation, l'entrée et le résultat accessible attendu.
Décrivez les tâches que la personne peut accomplir, plutôt que les dimensions seules.
Résumé
Utilisez le viewport de mise en page pour adapter le contenu, le contexte d'écran avec un objectif documenté et devicePixelRatio comme valeur variable.
Préservez les contrôles sémantiques et minimisez les données afin que l'expérience reste compréhensible.
La fenêtre peut être redimensionnée pendant une tâche ; l'interface doit rester utilisable pendant la transition.
Les valeurs d'écran ne doivent pas servir de substitut à une préférence d'accessibilité déclarée.
Une mise en page fluide est généralement plus durable qu'une liste de modèles précis.
Les tests doivent utiliser des longueurs de texte réelles et plusieurs langues.
Les états de chargement et d'erreur doivent rester lisibles quand le viewport change.
Gardez les actions essentielles en HTML sémantique même lorsqu'une amélioration visuelle est active.
Une mesure utile est celle qui conduit à une décision visible et vérifiable.
Sources
Articles Connexes
Faites passer BotBrowser de la recherche à la production
Utilisez ces guides pour comprendre le modèle, puis passez à la validation multi-plateforme, aux contextes isolés et au déploiement navigateur prêt pour l'échelle.