jqueryをスマホの時だけ動作させたい

質問

jqueryをスマホの時だけ動作させたいのですが、どう記述すればよいかご教示お願いいたします。

コピペOKの情報サイトからアコーディオンメニューのやり方を拝借したのですが、
PCでは動作させず、スマホで見た時だけアコーディオンにしたいと思っています。
素人ながら調べてやってみても思うようにいきません。

どなたか下記にどう追加すればよいか教えていただけないでしょうか。
宜しくお願い致します。

<script>
$(function() {
$('●●').each(function() {
$(this).on('click', function() {
$(this).toggleClass('on');
$("●●", this).slideToggle()
return false;
});
});
});
</script>

回答No.1

4017B

jQuery/Javascript を用いてスマホとPCを判別し処理を振り分ける方法は2つあります。1つは "UserAgent (ユーザーエージェント)" と呼ばれる環境変数を取得し、それを解析して処理を振り分ける方法。web上の解説記事などでは大体、この方法が指南されているかと思います。

function my_is_mobile1() {
if ( navigator.userAgent.match(/iPhone|Android.+Mobile/) ) {
return true;
}
else {
return false;
}
}

～上記、記述例の様な関数をコード内に適当に追記して置き、必要に応じて適宜判定処理を行わせます。ほとんどの場合、これで判別可能ですが一部のタブレット等はスマホとは判定されません。またスマホは毎年、新規モデルが発売され、また新規参入業者も常に入って来るため、過不足無くコードが正しく判定処理を行い続けられる様にするにはリアルタイムで常にメンテナンス(修正作業)を継続的に行い続ける必要があります。

…という訳なので1度コード書いた後は半永久的に放置プレイして置きたいのが人情(笑)！そこで遷ろいやすいユーザーエージェントでは無く、アクセスされたハードウェア(ブラウザ)の "画面サイズ" を取得して、それに応じて処理を振り分ける方法を使う方が後々の面倒が少ない様に思われます。

実際、スマホ判定処理に jQuery/Javascript を使っている時点でそもそもJSが実行出来る環境である事が大前提となっている訳ですし。スマホにしろガラケーにしろ、その時点で何らかのW3C準拠したモダンブラウザを経由してアクセスしている事が担保されている事になるので。そうなるとwebの動作処理上の差異は画面サイズの違いくらいしか考慮する必要は無いと思われますので(その他にも実行速度や搭載メモリ等を考慮する必要はありますが)。

function my_is_mobile2() {
if ( window.matchMedia && window.matchMedia('(max-device-width:400px)').matches ) {
return true; //画面サイズ:400px以下の時
}
else {
return false;
}
}

～以上の様な判別関数で現在、アクセスされてwebページが表示されている「ブラウザ上での画面サイズ」を数値情報として取得し判別出来ます。ただこの matchMedia はIE9以下だと動作しないのですが…まあ政府官公庁向けのwebサイト構築でもやっているので無い限り、現時点でもうIE9以下の旧ブラウザ群を考慮するのはナンセンスなので無視して構わないでしょう。

またこの matchMedia はCSSのメディアクエリと同じ感覚で扱う事が出来るので、スマホ判定以外にも細かい画面サイズに応じた処理の振り分けを行う際に非常に便利です。つまり min-device-width:400px と記述すれば「画面サイズ:400px以上」の時にマッチさせる事が出来ます。組み合わせれば色々と応用が効き非常に便利です。