Window: Eigenschaft innerWidth

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die schreibgeschützte Window-Eigenschaft innerWidth gibt die Innenbreite des Fensters in Pixeln zurück (d.h. die Breite des Layout-Viewports des Fensters). Dies schließt die Breite der vertikalen Scrollleiste ein, falls vorhanden.

Ähnlich kann die Innenhöhe des Fensters (d.h. die Höhe des Layout-Viewports) mit der innerHeight-Eigenschaft ermittelt werden. Diese Messung berücksichtigt auch die Höhe der horizontalen Scrollleiste, wenn sie sichtbar ist.

// This will log the width of the viewport
console.log(window.innerWidth);

// This will log the width of the frame viewport within a frameset
console.log(self.innerWidth);

// This will log the width of the viewport of the closest frameset
console.log(parent.innerWidth);

// This will log the width of the viewport of the outermost frameset
console.log(top.innerWidth);

Demo

HTML

html

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <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);