スマートフォンやタブレットから見た時だけ、Javascriptを適用したいシーンがありました。
まぁ具体的にはjQueryなんですが。
CSSはMedia Queriesで分けるとして、どうすればいいかしらん。
と思っていたら、あっさり解決。



最初にwindow widthを取得すればいいのねん。
私の場合は、タブレットとスマートフォンへの挙動を同じにしているので、
1024px以下の場合は同じ処理を適用しています。

javascript

$(document).ready(function(){
if ($(window).width() < 1024) {//ウインドウサイズが1024px以下ならば
$('#id').click(function() {//#idをクリックした時にイベントを適用
 //sample script ほげほげ
}
});

サンプルなんで別に何か動くスクリプトでもなく、単に備忘録。
うーん。
あとブラウザWidth = Window widthで合っているのだろうか。
あとこれ、もしスマフォと切り分ける場合はどうしよ。
課題残るの巻。

あ、もちろんちゃんとユーザーエージェントとか取得してる人はそのままでいいんです、はい。
私の場合はMedeia Queriesとの併用した時にどうするかだったので。


2014/3/3 追記

新たに記事を追加して書きました。
ウインドウオブジェクトを扱うよりも、モダンブラウザのみの対応で問題なければMediaQueryList オブジェクトを扱った方がスマートです。