Comment puis-je déterminer avec précision les dimensions de la fenêtre du navigateur en JavaScript ?

Détermination des dimensions de la fenêtre d'affichage du navigateur

Pour une expérience utilisateur optimisée, il est crucial de s'adapter aux différentes résolutions d'écran et tailles de fenêtre d'affichage de l'appareil. Cela vous permet de fournir des images de haute qualité sans sacrifier la clarté ni déformer les proportions. Pour atteindre cet objectif, explorons deux approches JavaScript permettant de récupérer avec précision les dimensions de la fenêtre d'affichage du navigateur.

1. Cross-Browser @media Values

Cette méthode utilise les requêtes multimédias @media CSS pour obtenir les dimensions de la fenêtre d'affichage du navigateur. En interrogeant le maximum de différentes mesures de fenêtre d'affichage, nous pouvons tenir compte des différences entre les navigateurs et les appareils.

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight | | 0);

2. Propriétés de la fenêtre et du document

Alternativement, nous pouvons exploiter des propriétés spécifiques de la fenêtre et du document pour obtenir des mesures de fenêtre.

window.innerWidth et window.innerHeight

Ces propriétés récupèrent les dimensions de la fenêtre, y compris les barres de défilement. Cependant, elles peuvent être influencées par les paramètres de zoom et ne sont pas prises en charge dans Internet Explorer 8 ou version antérieure.

document.documentElement.clientWidth et .clientHeight

Ces propriétés représente la fenêtre du navigateur moins la largeur de la barre de défilement. Ils correspondent aux valeurs @media lorsqu'aucune barre de défilement n'est présente et ils sont compatibles avec tous les navigateurs.

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!