Comment détecter la hauteur et la largeur de la fenêtre en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2020-07-25 12:16:46
Thèmes : webmaster - javascript
Question

Comment puis-je détecter la hauteur et la largeur de la fenêtre du navigateur en JavaScript ?

Réponse

Pour détecter la hauteur et la largeur de la fenêtre du navigateur, en JavaScript, vous pouvez utiliser les propriétés window.innerHeight et window.innerWidth.

Exemple pour détecter la hauteur et la largeur de la fenêtre du navigateur avec JavaScript :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment détecter la hauteur et la largeur de la fenêtre en JavaScript ?</title>
</head>
<body>
<div id="hauteur">Hauteur: <p></p></div>
<div id="largeur">Largeur: <p></p></div>
<script> 
const hauteur = document.querySelector("#hauteur p"); 
const largeur = document.querySelector("#largeur p"); 
window.onresize = function() { 
	hauteur.innerHTML = window.innerHeight;  
	largeur.innerHTML = window.innerWidth; 
}; 
</script>
</body>
</html>

Remarque : window.innerHeight récupère la hauteur de la page en incluant l'éventuelle barre de défilement, alors que window.outerHeight récupère l'intégralité de la taille de la fenêtre en incluant également les barres de menu.