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

javascript
この記事は約2分で読めます。
スポンサーリンク

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

DEMO

横幅:px

高さ:px

// ウィンドウの横幅
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);
}

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

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました