ウィンドウ内周(表示領域)の横幅と縦幅(高さ)を取得

ウィンドウ内周(表示領域)の横幅と縦幅(高さ)するには、横幅はwindow.innerWidthプロパティ、縦幅(高さ)はwindow.innerHeightプロパティを使用します。
取得する値は、垂直スクロールバーおよび水平スクロールバーを含むを含みます。

構文

横幅

var width = window.innerWidth;

高さ

var height = window.innerHeight;

戻り値:window.innerWidth

ウィンドウ内周(表示領域)の横幅の値を返します。

戻り値:window.innerHeight

ウィンドウ内周(表示領域)の高さの値を返します。

ただし、IE8以下ではwindow.innerWidthプロパティとwindow.innerHeightプロパティは使用できません。
この場合の対策として、document.documentElement.clientWidthプロパティ、document.documentElement.clientHeightプロパティを使用します。

  • ※ document.documentElementプロパティはルート要素(ノード)でHTML要素を返します。

構文

横幅

var clientWidth = document.documentElement.clientWidth;

高さ

var clientHeight = document.documentElement.clientHeight;

戻り値:window.innerWidth

ドキュメント表示領域の横幅の値を返します。

戻り値:window.innerHeight

ドキュメント表示領域の高さの値を返します。

サンプルコード

JavaScript

var getInnerWindowSize = function() {
	var innerWidth  = 0,
	    innerHeight = 0,
	    result      = {};

	if (window.innerWidth) {
		innerWidth = window.innerWidth;
	} else if (document.documentElement.clientWidth) {
		innerWidth = document.documentElement.clientWidth;
	}

	if (window.innerHeight) {
		innerWidth = window.innerHeight;
	} else if (document.documentElement.clientHeight) {
		innerWidth = document.documentElement.clientHeight;
	}

	return {
		width  : innerWidth,
		height : innerHeight
	};
};

var innerWindowSize = getInnerWindowSize();

alert(innerWindowSize.width);