Lorsque l’on développe un site web moderne, il est souvent nécessaire d’adapter l’affichage en fonction de la taille de l’écran ou de la fenêtre du navigateur. JavaScript permet de récupérer facilement ces informations afin de rendre vos pages responsives et interactives.
Dans cet article, nous allons voir comment obtenir la largeur et la hauteur de l’écran avec JavaScript, et comment les utiliser dans vos projets.
screen et window en JavaScriptAvant de plonger dans le code, il est important de distinguer deux notions :
screen : représente l’écran physique de l’appareil (ordinateur, tablette, smartphone).
window : représente la fenêtre du navigateur (zone où s’affiche votre site).
En général, pour adapter le contenu d’un site, on utilise plutôt window.innerWidth et window.innerHeight.
La taille de l'écran (ou résolution d'écran) désigne les dimensions physiques de l'affichage de l'appareil de l'utilisateur, exprimées en pixels. Cela diffère de la taille de la fenêtre du navigateur, qui peut varier si l'utilisateur redimensionne la fenêtre.
Obtenir ces données permet de :
En JavaScript, l'objet window.screen fournit ces informations de manière native, sans besoin de bibliothèques externes. Notez que cette méthode fonctionne dans la plupart des navigateurs modernes comme Chrome, Firefox et Edge.
screenSi vous voulez récupérer la taille complète de l’écran de l’appareil, utilisez :
console.log("Largeur écran : " + screen.width + "px");
console.log("Hauteur écran : " + screen.height + "px");
screen.width : représente la largeur totale de l’écran.
screen.height : représente la hauteur totale de l’écran.
Attention : cela inclut toute la surface, même en dehors de la fenêtre du navigateur.
windowPour récupérer la taille visible de la fenêtre (zone où s’affiche votre site) utilisez :
console.log("Largeur fenêtre : " + window.innerWidth + "px");
console.log("Hauteur fenêtre : " + window.innerHeight + "px");
window.innerWidth : représente la largeur de la zone de contenu visible.
window.innerHeight : représente la hauteur de la zone visible.
Ces valeurs changent si l’utilisateur redimensionne la fenêtre ou tourne son appareil (mode portrait/paysage).
resizePour que votre site s’adapte automatiquement lorsqu’un utilisateur modifie la taille de sa fenêtre, vous pouvez utiliser l’événement resize :
window.addEventListener("resize", function() {
console.log("Nouvelle largeur : " + window.innerWidth + "px");
console.log("Nouvelle hauteur : " + window.innerHeight + "px");
});
Cela permet, par exemple, de réorganiser vos éléments ou de charger une version différente d’un contenu selon la taille d’écran.
Voici un petit exemple qui affiche la taille de la fenêtre directement sur la page :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Taille de l'écran avec JavaScript</title>
</head>
<body>
<h2 id="taille"></h2>
<script>
function afficherTaille() {
document.getElementById("taille").innerText =
"Fenêtre : " + window.innerWidth + " x " + window.innerHeight + " px";
}
// Afficher au chargement
afficherTaille();
// Mettre à jour quand on redimensionne
window.addEventListener("resize", afficherTaille);
</script>
</body>
</html>
En JavaScript, obtenir la taille de l’écran ou de la fenêtre est simple grâce aux propriétés screen.width, screen.height, window.innerWidth et window.innerHeight.
Retenez que :
screen : représente la taille physique de l’écran.
window : représente la taille visible de la fenêtre (utile pour les sites responsives).
L’événement resize permet d’adapter votre contenu en temps réel.
En utilisant ces méthodes, vous pouvez créer des interfaces adaptatives et ergonomiques, que ce soit sur mobile, tablette ou ordinateur.
Meilleure pratique : Pour un design responsive, préférez l'utilisation des media queries CSS. JavaScript est utile pour des logiques plus complexes.