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.

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

もっと詳細に言えば、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

ブラウザーの互換性

BCD tables only load in the browser

関連情報