スマートフォンやタブレットなどマルチデバイス対応。最近は、別ファイルへの振り分けより圧倒的にレスポンシブ対応が多いです。
IE8以下やAndroid2.Xを対象外とすることが増えてきたので、以前よりサイト構築は楽になりましたけど、javascriptが絡む部分はちょいちょい詰まってしまいます……。
そんなレスポンシブ対応サイト制作時のjavascriptで知っておくと役に立つんじゃないかと思う小技をいくつかご紹介します。
cssとjavascriptのブレイクポイントを合わせる
レスポンシブ対応する時、Media Queriesを使ってcssを切り替えます。デバイスの横幅で判定して適用するスタイルを変えるという方法です。
同じようにデバイスの横幅に応じてjavascriptを切り替える場合に、「$(window).innerWidth()」を使うとcssのブレイクポイントとずれてしまいます。
これはスクロールバーのぶん生じてしまう差で、以下のエントリーにあるようにjQueryの記述を使わずに「window.innerWidth」を使うことで解決できます。
参考：
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : code14
例えば、スクロール追随サイドバーを一定のサイト幅以下で無効にするとか、縦並びレイアウト変更時にautoheight.jsを無効にするとかに使っています。
デバイス判別し、クリックイベントとタッチイベントを切り替える
クリックイベントでもスマホ閲覧時に動きます。でも、若干タイムラグが生じるそうです。
参考：
オンズ » 【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。
こちらの記事に書いているように、ちょっとした記述でそれぞれのデバイスに応じたイベントに切り替えることができるので、設定しておくと良いんじゃないでしょうか。
ただ、この方法だと完全に判別できるわけではないらしく、クリックイベントとタッチイベントでイベント内容を変更したい場合なんかは下記の方法を参考にどうぞ。
参考：
[jQuery] click / touch / pointer イベントを完全に制御する – Qiita
（私はそういったケースに遭遇したことがなく、試したことがないので、詳しいことは書けません。すみません……。）
まとめ
デバイス毎に切り替えるのであればUA（ユーザーエージェント）判別を使えば良いのかもしれません。でも、cssは幅に応じて切替えているので、微妙な表示になってしまうケースが出てきてしまいます。
想定した複数のデバイスでの表示を最適化するのではなく、どんな画面サイズの時でも表示を最適化するのがレスポンシブデザインだと思います。ですから、jsもブレイクポイントで切り替えたほうが良いです。cssとjsで切り替える軸を別のものにしてしまうと、検証が面倒ですしね。
また、共有できるネタができたら追記していきます。
公開：2015/09/28