jQueryでウィンドウサイズを取得するサンプルコード

2023-07-06

以下は、jQueryを使用してウィンドウサイズを取得するためのサンプルコードです。

$(window).on('resize', function() {
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	
	// ウィンドウサイズの値を表示するなど、任意の処理を実行します
	console.log('Width: ' + windowWidth + ', Height: ' + windowHeight);
});

このコードでは、resizeイベントをウィンドウオブジェクトにバインドし、ウィンドウサイズが変更されるたびに指定されたコールバック関数が実行されます。関数内部で、$(window).width()および$(window).height()を使用してウィンドウの幅と高さを取得し、それぞれwindowWidthとwindowHeight変数に代入します。このサンプルコードでは、コンソールにウィンドウの幅と高さを表示するだけですが、任意の処理を実行することも可能です。

また、resizeイベントはウィンドウのサイズが変更されるたびに発生するため、必要に応じて処理が頻繁に実行されることに注意してください。パフォーマンスの問題がある場合は、適切なスロットリングやデバウンシングの手法を組み込むことも検討してください。