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 July 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.

Wert

Ein ganzzahliger Wert, der die Breite des Layout-Viewports des Fensters in Pixeln angibt. Diese Eigenschaft ist schreibgeschützt und hat keinen Standardwert.

Um die Breite des Fensters zu ändern, verwenden Sie eine der Window-Methoden zum Ändern der Fenstergröße, wie zum Beispiel resizeBy() oder resizeTo().

Nutzungshinweise

Wenn Sie die Breite des Fensters abzüglich der Scrollleiste und der Ränder benötigen, verwenden Sie stattdessen die clientWidth-Eigenschaft des Wurzelelements <html>.

Die innerWidth-Eigenschaft ist auf jedem Fenster oder Objekt verfügbar, das sich wie ein Fenster verhält, wie zum Beispiel ein Frame oder Tab.

Beispiele

js
// 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

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

Ergebnis

Spezifikationen

Specification
CSSOM View Module
# dom-window-innerwidth

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
innerWidth

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch