jquery javascript 投稿日：2017/09/04

jQueryでCSSのメディアクエリと連動して判定を行う

CSSのメディアクエリブレークポイントと連動して、スマホやタブレット別の処理を行いたい。誰でも簡単に扱えるjQueryの判定関数を作成してみました。

ここ数年、WEBサイトをレスポンシブ化しない例が無いくらいにレスポンシブが定着しています。

さらに近年のGoogleによるモバイルファースト施策に対し、レスポンシブは優位な技術ですので今後もレスポンシブ時代は続きます。

レスポンシブの技術自体はCSSのメディアクエリによる解像度の判定だけですので簡単に導入可能ですが、依然としてCSSやSCSSの欠点でもある静的プロパティをjavascriptで補う機会は多いです。

そこで良くあるブレークポイントである、

  1. タブレット
  2. スマートフォン

上記のデバイスにおいてCSSのメディアクエリとJSを連動させる仕組みを作りました。

完成したコード

以下のコードをサイトに組み込んで下さい。

CSS

.visible-tablet,
.visible-phone {
    display: none;
}
@media screen and (max-width: 960px) {
    .visible-tablet {
        display: inherit;
    }
}
@media screen and (max-width: 600px) {
    .visible-phone {
        display: inherit;
    }
}

HTML(javascript)
もちろんjavascriptを外部ファイルにしても良いです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var isMobile = {
	phone : false,
	tablet : false,
	phoneCheck : function(){
		this.phone = $($('.visible-phone')[0]).is(':visible');
		return this.phone;
	},
	tabletCheck : function(){
		this.tablet = $($('.visible-tablet')[0]).is(':visible');
		return this.tablet;
	},
	check : function(){
		this.phoneCheck();
		this.tabletCheck();
		// console.log(isMobile.phone, isMobile.tablet);
	},
	init : function(){
		if ($('.visible-phone').length <= 0) $('body').append($('<div class="visible-phone"></div>'));
		if ($('.visible-tablet').length <= 0) $('body').append($('<div class="visible-tablet"></div>'));
		this.check();
		$(window).resize(function(){
			isMobile.check();
		});
	}
};
</script>

使い方

まず、ページロード時にisMobileを初期化します。

<script>
$(function(){
	isMobile.init();
});
</script>

あとはisMobile.phoneとisMobile.tabletを好きに呼び出してください。 現在のブレークポイントと対応してtrueとかfalseが帰ります。

ウィンドウをリサイズしても、リサイズイベントによりtrueとfalseが的確に返されます。

使用例

スマホ時のみサブメニューをトグルさせる例。

//.openSubMenuボタンがクリックされた時
$(document).on('click','.openSubMenu',function(){
	// スマホだったら
	if(isMobile.phone){
		// サブメニューをトグル
		$('.subMenu').toggle();
	} else {
		// PCとタブレットは何もしない
	}
});

画面リサイズ時、グローバルナビをハンバーガーにする例。

// ウィンドウリサイズ時に
$(window).resize(function(){
	// スマホじゃなかったら
	if(!isMobile.phone){
		// ナビゲーションを強制的に表示
		$('.globalNavi').show();
	}
});
// ハンバーガークリック
$(document).on('click','.hamburger',function(){
	// ナビゲーションをトグル
	$('.globalNavi').toggle();
});

（もっとマシな例はないのかというツッコミは大歓迎です）

もっとコンパクトな関数

var isPhone = function(){
	return $($('.visible-phone')[0]).is(':visible');
}
var isTablet = function(){
	return $($('.visible-tablet')[0]).is(':visible');
}

init()とか余計なお世話だという方はもちろんこれだけで充分です。

comments powered by Disqus