Jqueryで画面サイズ変更をリアルタイムで処理

2022年9月13日

レスポンシブは主にスタイルシートで判定しレイアウトの自動調整を行います。
画面サイズによってリアルタイム反映されます。

ただJqueryを盛り込む際に、レスポンシブの動きをJqueryで想定する必要があります。

スタイルシートは特に意識しなくても、画面サイズの変更に合わせてリアルタイムで反応します。
しかし、Jqueryの場合は意識して作らなければ、リアルタイム反応ができません。

今回は、Jqueryの画面サイズリアルタイム反応についてググって対処しました。

今回の内容

1. 現象はこのような感じです。
2. 原因はイベント発火の条件
3. 画面サイズをリアルタイムに反映するにはresize()を使用します
4. 注意　このままだと処理が重くなる

現象はこのような感じです。

まずはサンプルをご覧ください。

ソースはこちらです。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>画面サイズリアルタイム判定</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	if (window.innerWidth > 1000)
	{
		$("p").text("画面幅は1000ピクセル以上です");
	}
	else if (window.innerWidth > 800)
	{
		$("p").text("画面幅は800ピクセル以上です");
	}
	else if (window.innerWidth > 600)
	{
		$("p").text("画面幅は600ピクセル以上です");
	}
	else 
	{
		$("p").text("画面幅は600ピクセルより小さいです。");
	}
});
</script>
<style type="text/css">
p {
	font-size: 32px;
	text-align: center;
	border: 2px solid #6C0;
}
</style>
</head>

<body>
<p></p>
</body>
</html>

<!doctype html>

<html>

<head>

<title>画面サイズリアルタイム判定</title>

$(document).ready(function()

{

if (window.innerWidth > 1000)

{

$("p").text("画面幅は1000ピクセル以上です");

}

else if (window.innerWidth > 800)

{

$("p").text("画面幅は800ピクセル以上です");

}

else if (window.innerWidth > 600)

{

$("p").text("画面幅は600ピクセル以上です");

}

else

{

$("p").text("画面幅は600ピクセルより小さいです。");

}

});

</script>

p {

font-size: 32px;

text-align: center;

border: 2px solid #6C0;

}

</style>

</head>

<body>

<p></p>

</body>

</html>

ページを開いたときは、その時点の画面サイズを判定し、処理を分岐します。
これはこれでそれなりに動ていますが、欠点があります。

サンプルのウィンドウサイズを変えても、画面サイズ判定が発火しないため、リアルタイム反映されないのです。

原因はイベント発火の条件

ちゃんとif文で分岐しているのに、なぜウィンドウサイズ変更で反応しないのか？
調べてみると、ウィンドウサイズ変更時に、Jqueryの発火処理を盛り込んでいないためだということがわかりました。

画面サイズをリアルタイムに反映するにはresize()を使用します

では画面変更時にイベント発火させるためにはどうすればよいかを調べたところ、resize()を使用すればよいことがわかりました。

$(window).resize(function() 
{
	//ウィンドウサイズ変更時の処理を盛り込む
});

$(window).resize(function()

{

//ウィンドウサイズ変更時の処理を盛り込む

});

resize()はウィンドウサイズが変わったときに発火します。
ready()処理と同レベルのイベントになります。

早速ソースを次のように書き換えテストしてみたところ、ウィンドウサイズ変更をリアルタイムで反映できました。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>画面サイズリアルタイム判定</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).resize(function() 
{
	width_disp();
});

$(document).ready(function()
{
	width_disp();
});

function width_disp()
{
	if (window.innerWidth > 1000)
	{
		$("p").text("画面幅は1000ピクセル以上です");
	}
	else if (window.innerWidth > 800)
	{
		$("p").text("画面幅は800ピクセル以上です");
	}
	else if (window.innerWidth > 600)
	{
		$("p").text("画面幅は600ピクセル以上です");
	}
	else 
	{
		$("p").text("画面幅は600ピクセルより小さいです。");
	}
}

</script>
<style type="text/css">
p {
	font-size: 32px;
	text-align: center;
	border: 2px solid #6C0;
}
</style>
</head>

<body>
<p></p>
</body>
</html>