Dimensions de l’écran, de la fenêtre et de la page Web JavaScript

Déterminer avec précision les dimensions de l’écran, de la fenêtre du navigateur et du contenu de la page web de vos utilisateurs est crucial pour la création d’applications web réactives et conviviales. Ce guide clarifie les distinctions entre ces trois concepts et fournit des méthodes JavaScript fiables pour récupérer leurs tailles respectives.

Table des matières

1. Comprendre les différences entre les dimensions de l’écran, de la fenêtre et de la page web
2. Récupérer les dimensions de l’écran, de la fenêtre et de la page web avec JavaScript

Comprendre les différences entre les dimensions de l’écran, de la fenêtre et de la page web

Avant de plonger dans le code, définissons clairement les termes :

• Écran : Représente toute la zone d’affichage physique de l’appareil de l’utilisateur. Ses dimensions reflètent le nombre total de pixels du moniteur.
• Fenêtre : Fait référence à la fenêtre du navigateur elle-même — la zone où votre page web est affichée. La taille de la fenêtre peut être inférieure à la taille de l’écran si le navigateur n’est pas maximisé. Elle exclut la barre d’outils du navigateur (barres d’outils, menus, etc.).
• Page web (Document) : Englobe le contenu rendu de votre page web. Ses dimensions dépendent de la taille, de la mise en page et du style du contenu. Elle peut être plus petite ou plus grande que la fenêtre du navigateur (ce qui entraîne l’apparition de barres de défilement).

Récupérer les dimensions de l’écran, de la fenêtre et de la page web avec JavaScript

Voici comment obtenir ces dimensions à l’aide de JavaScript :

1. Taille de l’écran

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

console.log(`Largeur de l'écran : ${screenWidth} pixels`);
console.log(`Hauteur de l'écran : ${screenHeight} pixels`);

2. Taille de la fenêtre

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

console.log(`Largeur de la fenêtre : ${windowWidth} pixels`);
console.log(`Hauteur de la fenêtre : ${windowHeight} pixels`);

3. Taille de la page web (Document)

La détermination des dimensions exactes de la page web nécessite une approche plus robuste en raison des incohérences entre les navigateurs. La fonction suivante gère divers scénarios :

function getDocumentSize() {
  const body = document.body;
  const html = document.documentElement;

  const docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
  const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

  return { width: docWidth, height: docHeight };
}

const documentSize = getDocumentSize();
console.log(`Largeur du document : ${documentSize.width} pixels`);
console.log(`Hauteur du document : ${documentSize.height} pixels`);

Cette fonction prend en compte différentes propriétés pour tenir compte des variations entre les navigateurs et assure une mesure plus précise du contenu rendu, y compris les zones situées au-delà de la fenêtre d’affichage visible.

En comprenant les différences et en utilisant ces méthodes JavaScript, vous pouvez créer des applications web qui s’adaptent parfaitement aux différentes tailles d’écran et configurations de fenêtre.