Comment puis-je obtenir les dimensions de la fenêtre du navigateur à l'aide de JavaScript ?

Comment acquérir les dimensions de la fenêtre d'affichage du navigateur

Arrière-plan :

Les navigateurs affichent le contenu dans une zone désignée connue sous le nom de « fenêtre ». Cette zone exclut la barre d'adresse, les barres d'outils et d'autres éléments de l'interface utilisateur. Dans certains scénarios, les développeurs peuvent avoir besoin de déterminer la taille exacte de la fenêtre d'affichage pour offrir aux utilisateurs une expérience de visualisation optimale.

Solution :

Il existe plusieurs méthodes pour récupérer le dimensions de la fenêtre d'affichage du navigateur à l'aide de JavaScript :

1. Valeurs multi-navigateurs @media (largeur) et @media (hauteur) :

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

2. window.innerWidth et window.innerHeight :

Ces propriétés renvoient directement la largeur et la hauteur de la fenêtre CSS, y compris les barres de défilement. Notez toutefois que ces valeurs peuvent varier sur les appareils mobiles en raison de problèmes de mise à l'échelle.

3. document.documentElement.clientWidth et .clientHeight :

Ces propriétés calculent la largeur et la hauteur de la fenêtre d'affichage, à l'exclusion de la largeur de la barre de défilement. Elles s'alignent sur les valeurs @media lorsqu'il n'y a pas de barre de défilement.

Informations supplémentaires :

• Les méthodes décrites ci-dessus sont compatibles avec tous les navigateurs et largement prises en charge.
• Des ressources sont disponibles en ligne pour tester les sorties en direct de diverses fenêtres dimensions.
• Des bibliothèques tierces telles que « verge » et « actual » fournissent des abstractions pratiques pour obtenir des dimensions précises de la fenêtre d'affichage dans n'importe quelle unité de mesure souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!