会社の新しい汎用テーマの作成に取り掛かっています。
今回はレスポンシブデザインを取り入れてみようと思ったのですが、地味に壁が多いです。これ。
何よりも厄介なのが、jQueryの制御な気がしてます。
例えば、グローバルナビゲーションとかで、リストがネストしてるサブメニューを作り、それをマウスオーバーで親メニューにポイントしたら小メニューが出てくるみたいなのを作ると、当然それはモバイルサイズでも動作してしまいます。
なので、そんな時の対策を考えなくてはなりません。
色々方法を考えてみたのですが、たぶんjQueryでウィンドウ幅を取得し、それに応じてhtml要素にクラスをつけちゃうのがいい気がしました。

考えてみた

簡単に説明

まず、前半部分で、読み込み直後の初期化処理をします。
次に、後半部分はウィンドウのサイズが変更された時の処理です。
基本的には、window.resize()を使ってウィンドウサイズに変更が加わった時に再度ウィンドウサイズを取得して切り替えるのですが、これだと以前に起きた、200pixel動かすと200回処理が加わる的な状態になってしまいます。
そこで、この処理自体をsetTimeoutではさみます。こうすると、ウィンドウサイズ変更後一定時間経過してから処理を行うようになりますので、動かし続けている間は動作しません。
25行目の150という数字を書き換えると、リサイズ後、実際に処理が始まるまでの時間を変更できます。
ミリ秒ですので1000で1秒となります。150なら0.15秒となります。
だいたい100から200くらいにしておけば大丈夫だと思いますがこのへんはおこのみで。
待ち時間が長くなるほどウインドウのりサイズが終わってから動作するまでの時間が長くなりますので、あんまり長すぎると「あれ？こえが　おくれて　きこえてくるよ？」みたいな感じになりますｗ
あとは、html class=”foo” の値で条件分岐してあげればPCだけで動作するJS、スマホだけで動作するJSといった振り分けができますね。

さいごに…

今回はブレイクポイントを横720ピクセルで1つだけ設定しましたが、これを増やしていけばもっと細かく分けることも可能なはずですが、処理が複雑になってくるので、Breakpoints.jsなどを使ったほうがいいかもしれません。
Breakpoints.jsについてはまた改めて書こうと思います。