スマートフォン&タブレットからアクセスした時だけJavascriptを適用する

スマートフォン、タブレット

スマートフォンやタブレットから見た時だけ、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 comments

Leave Comment
  1. Pingback: スマートフォン&タブレットからアクセスした時だけJavascriptを適用する | Wakana.me : ちゅどん道中記

  2. Pingback: スマートフォン&タブレットとパソコンで別のJavaScriptを実行 | WEBでいこう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>