Window: 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.

WindowinnerWidth プロパティは読み取り専用で、ウィンドウの内部の幅をピクセル単位で返します。これには垂直スクロールバーがある場合、その幅を含みます。

もっと詳細に言えば、innerWidth の値はウィンドウのレイアウトビューポートの幅から取られます。ウィンドウの内部の高さは innerHeight プロパティを使用して取ることができます。

整数値で、ウィンドウのレイアウトビューポートの幅をピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

ウィンドウの幅を変更するには、 Window の寸法の変更メソッドのうちの一つ、例えば resizeBy()resizeTo() などを呼び出してください。

使用上の注意

ウィンドウからスクロールバーや境界を引いた幅を取得するには、ルートの <html> 要素の clientWidth プロパティを代わりに使用してください。

innerWidth はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。

js
// これはビューポートの幅を返す
console.log(window.innerWidth);

// これはフレームセット内のフレームビューポートの幅を返す
console.log(self.innerWidth);

// これは直近のフレームセットのビューポートの幅を返す
console.log(parent.innerWidth);

// これはもっとも外側のフレームセットのビューポートの幅を返す
console.log(top.innerWidth);

デモ

HTML

html
<p>
  <code>resize</code>
  イベントを発行させるためにブラウザーのウィンドウの大きさを変えてください。
</p>
<p>ウィンドウの幅: <span id="width"></span></p>
<p>ウィンドウの高さ: <span id="height"></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);

結果

仕様書

Specification
CSSOM View Module
# dom-window-innerwidth

ブラウザーの互換性

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.

関連情報