Window : propriété innerWidth

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété en lecture seule innerWidth de l'interface Window retourne la largeur intérieure de la fenêtre en pixels, c'est-à-dire la largeur de la disposition de la zone d'affichage de la fenêtre. Cela inclut la largeur de la barre de défilement verticale, si elle est présente.

De même, la hauteur intérieure de la fenêtre (c'est-à-dire la hauteur de la disposition de la zone d'affichage) peut être obtenue en utilisant la propriété innerHeight. Cette mesure prend également en compte la hauteur de la barre de défilement horizontale, si elle est visible.

// Cela affichera la largeur de la zone d'affichage
console.log(window.innerWidth);

// Cela affichera la largeur de la zone d'affichage du cadre dans un frameset
console.log(self.innerWidth);

// Cela affichera la largeur de la zone d'affichage du frameset le plus proche
console.log(parent.innerWidth);

// Cela affichera la largeur de la zone d'affichage du frameset le plus éloigné
console.log(top.innerWidth);

Démonstration

HTML

html

<p>
  Redimensionnez la fenêtre du navigateur pour déclencher l'événement
  <code>resize</code>.
</p>
<p>Hauteur de la fenêtre&nbsp;: <span id="height"></span></p>
<p>Largeur de la fenêtre&nbsp;: <span id="width"></span></p>

JavaScript

const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);