jQuery、JavaScriptで画面幅を判定したい

Question

前提・実現したいこと

下記のようにCSSをモバイルファーストに記述しているのですけど、これと同じことをJavaScriptで実現したいです。

@media screen and (min-width:480px) { 
    /*　480px以上　*/
}
@media screen and (min-width:768px) and ( max-width:1023px) {
    /*　768px以上、1023px以下　*/
}
@media screen and (min-width:1024px) {
    /*　1024px以上　*/
}

つまり以下の感じで使いたいというイメージになるのですが、

	if ( is_breakpoint(480) ) {
		// 480px以上
	}

発生している問題・エラーメッセージ

このコードで間違っているところを教えてもらってもよろしいでしょうか。

	function is_breakpoint(bp) {
	
		var bps = [480, 768, 1024];
		var w = $(window).width();
		var min, max;
		for (var i = 0, l = bps.length; i < l; i++) {
			if (bps[i] === bp) {
				min = bps[i-1] || 0;
				max = bps[i];
				break;
			}
		}

		return w < min && w >= max;
	}

retrunのところの記号を逆にしたりしてみたのですが・・よくわかってないです。

Answer 1

判定ならこれを使えばよいとおもいます。

【window.matchMedia - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

Comments

[concealer]

ありがとうございます！判定には一番便利そうなので今後はこれを使いたいを思います。

Answer 2

returnのところがおかしいように思います。

例えば現状のコードを下記で呼び出した場合で考えてみます

is_breakpoint(480)

上記のようにするとこの関数から返される値は、
「現在の画面幅(w)が479(min)より小さい」かつ「現在の画面幅(w)が480(max)より大きい」となります。

return w < min && w >= max;

この場合、minは必ずmaxより小さいはずなのでこの関数では常にfalseが返されることになります。

is_breakpoint(480)で480以上のときにtrueが返される関数にするためには
単純に下記のようにすればよいのかなと思います。

return w >= max

Comments

[concealer]

そうなんです、何をしてもfalseで困っていました。変な風に考えてました。ありがとうございます。