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);