jQueryでブラウザの横幅・高さを取得する方法｜初回読み込み時、リサイズ時に取得

まずは、ウィンドウの横幅と高さを取得します。

DEMO

// ウィンドウの横幅
var width = $(window).width();
// ウィンドウの高さ
var height = $(window).height();

取得した横幅と高さを読み込み時とリサイズ時に取得して、デモの様に表示します。

var width = $(window).width();
var height = $(window).height();

// 読み込み時に取得した横幅と高さを表示
$(".demo1 p:eq(0) span").text(width);
$(".demo1 p:eq(1) span").text(height);

// リサイズ
$(window).on("resize", function() {

	// 再度、横幅と高さを取得
	width = $(window).width();
	height = $(window).height();

	// リサイズ時に再度取得した横幅と高さを表示
	$(".demo1 p:eq(0) span").text(width);
	$(".demo1 p:eq(1) span").text(height);
});

読み込み時とリサイズ時に、同じ処理を繰り返すので、まとめると編集しやすくなります。

// 読み込み時の処理
windowSize();

// リサイズ時の処理
$(window).on("resize", function(){ windowSize(); });

// 処理内容
function windowSize() {

	// 横幅と高さを変数に代入
	var width = $(window).width();
	var height = $(window).height();

	// 横幅と高さを表示
	$(".demo1 p:eq(0) span").text(width);
	$(".demo1 p:eq(1) span").text(height);
}

これで読み込み時とリサイズ時で、常にウィンドウサイズを取得でるので様々な指定に利用できます。