【Labs】JavaScriptで振り分ける方法２パターン

こんにちは（・∀・）

今日はJavaScriptで振り分ける方法２パターンをご紹介します。

JavaScriptとレスポンシブデザインの組み合わせ

レスポンシブデザインのサイトでスマホ向けとPC向けでJavaScriptを使い分けたい場合は多くあると思います。

スマホ向けのページにはJavaScriptを使いたいけどPC向けのページではJavaScriptは必要ない、逆の場合もあれば、またはそれぞれ別のスクリプトを使用したいこともあります。

Contents

1. Windowサイズで振り分ける
2. 要素の有無で判別

Windowサイズで振り分ける

Windowサイズで振り分ける方法です。

サンプル

JavaScript

<script>
$(function(){
if($(window).width() < 769){
//forスマホ
}else{
//forPC
}
});
</script>

画面サイズで振り分けることができます。

要素の有無で判別

画面に表示されている要素の有無で振り分ける方法です。

サイトに表示させるグローバルナビやボタンなどはスマホサイトとPCサイトで変えていることは多いと思います。

例えばスマホサイトではハンバーガーボタンを使いますが、PCサイトでは別の方法でボタンを表示するなど。

それら要素の表示非表示を利用します。

サンプル

.is(':visible')または.is(':hidden')で要素の表示非表示を判別します。

CSS

<style>
#hoge {
  display: none;
}
@media (min-width: 769px) {
#hoge {
  display: block;
}
/* ** */}
</style>

JavaScript

<script>
$(function() {
$(window).on('load resize', function(){
if($('#hoge').is(': hidden')){
//forスマホ
} else {
//forPC
}
});
});
</script>

目印となる要素がdisplay:noneなのかdisplay:blockなのかで判別して振り分けます。

参考

javascript(jQuery)でメディアクエリを判定する方法(IE9対応)