スマートフォンやタブレットから見た時だけ、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 オブジェクトを扱った方がスマートです。
2件のコメント
2件のピンバック