質問: jQueryを主に使ってWebサイトの動きをごにょごにょしているのですが、 レスポンシブデザインでスマホ、タブレット、pcで用いるjQueryを切りたいと考えています! 今回の場合は、pcではlightbox(featherlight.js)で表示していた要素を、スマホではタブ切り替え(生jQueryもしくは何かプラグイン)で表示できるようにしようと思っています。 この際の、**jsを切り替えるベストな方法を教えてくださると助かります。** ちなみに自分なりに調べたものとしては * $(window).on('load resize')でwindowのwidthによって切り替える。 * window.matchMediaをつかってwidthによって切り替える。 * window.userAgent.indexOf('iPhone')をつかってユーザーエージェントによって切り替える などがありました。 $(window).on('load resize')で過去に切り替えたことがあるのですが、 ぎこちなかったり、すこし挙動が出たりして (#追記:確実にこれのせいとは言えませんが、画面サイズ変更時に2重に読み込まれるのかも。) どの方法がいいのか迷っております。 もちろん状況に応じて変わるとも思いますし、 $(window).on('load resize')は画面サイズ変更ごとにjsが動いてしまう。iphoneを横に使用した場合の対応。 matchMediaはIE9以下未対応、 useAgentは対応する個体数が多くなるにつれて大変などあるかと思いますが、 **これがおすすめ。これ使うならこうしたほうがいいよ。他にもっといい方法があるよ。や、気をつけるべき点などがあれば教えていただけると助かります。**
回答: 環境の振り分けをする際に自分がよく使う方法は ・documentのDOMContentLodedイベントを使って ・resizeイベントのリスナー登録と実行を同時に行う というものです。 ``` document.addEventListener( 'DOMContentLoaded', //1 function(ev){ window.addEventListener( 'resize', //2 (function on_resize(ev){ //3 if(window.matchMedia('(max-width: 640px)').matches){ //4 //スマホ向けの処理 } else{ //PC、タブレット向けの処理 } return on_resize; //5 })(), //3 false ); }, false ); ``` 1DOMContentLoadedイベントはloadイベントより前、HTMLが解析された時点で呼び出されます。そのため、画像の読み込みを待つ間などに中途半端な状態が表示されることがありません。画像のサイズを取得するなど、loadイベントの後に実行する必要がある場合を除いては、たいていこのイベントを利用しています。 2画面の幅を基準にすることを想定して、resizeイベントにリスナーを登録します。 3CSSとの連携を考慮してwindow.matchMediaで環境を振り分けます。 4resizeイベントのリスナー指定部分 (function on_resize(){...})() は、「on_resize」という名前で定義した関数の、実行結果を受け取っています。on_resize関数の中身はresizeイベント時の処理ですが、最初のresizeイベントが起こる前に一度実行することで、初期の状態をセットします。 5自分自身を返します。「return arguments.callee」と同じです。ここで自分自身を返すことで、3でresizeイベントのリスナーにこの関数が登録されます。 と、ここまで書いて気づいたのですが、こちら2015年9月の投稿でしたね... すでに解決されているかと思いますが、ご参考まで。 見当違いでしたら、すみません m(_ _)m