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 2015年7月.

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

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

値

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

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

使用上の注意

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

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

例

// これはビューポートの幅を返す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></span></p><p>ウィンドウの高さ: <span></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);