2015.07.09

jQueryの処理も画面サイズに応じて変えたい

スライダーや要素の高さを揃えるjQueryプラグインも、
CSSのレスポンシブのように処理を変えたいときは以下のように記述するとよいです。

$(function(){
	var winWidth = $(window).width(); // 画面の横幅を取得
	if (winWidth > 640) {

		// 横幅が 640px より大きい場合の処理（640pxは含まない）

	} else {
		
		// 横幅が 640px 以下の場合の処理（640pxを含む）

	}
});

また、例えば640pxを一つの境界としたうえで、
1000pxも境界にしたいとなった場合は以下のように書きます。

$(function(){
	var winWidth = $(window).width(); // 画面の横幅を取得
	if (winWidth > 1000) {

		// 横幅が 1000px より大きい場合の処理（1000pxは含まない）

	} else if (winWidth > 640) {

		// 横幅が 1000px 以下で、640px より大きい場合の処理（1000pxを含み、640pxは含まない）

	} else {
		
		// 横幅が 640px 以下の場合の処理（640pxを含む）

	}
});