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

Posted on 2017-11-10
Last updated on 2018-03-16

こんにちは（・∀・）

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

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

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

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


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

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

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

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

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

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

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


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


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

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