はい
Contents
参考
構成
index.html | 読み込むやつ |
---|---|
trigger.js | UA判別して指定ファイルを読み込む |
sp.js | UA別にやりたいこと |
tablet.js | UA別にやりたいこと |
pc.js | UA別にやりたいこと |
こういうのがあるとする。
中身
1 2 3 4 5 6 | <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,maximum-scale=1.0"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="trigger.js"></script> </head> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(function(){ var ua = navigator.userAgent; if((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('iPad') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Silk') > 0){ alert('タブレット'); $.ajax({ url: 'tablet.js', dataType: 'script', cache: false }); } else if ((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ua.indexOf('iPhone') > 0 || ua.indexOf('Blackberry') > 0 || ua.indexOf('iPhone') > 0){ alert('スマートフォン'); $.ajax({ url: 'sp.js', dataType: 'script', cache: false }); } else { alert('その他'); $.ajax({ url: 'pc.js', dataType: 'script', cache: false }); } }); |
Androidのスマホとタブレットの違いは「mobile」の有無なんだって。
なんでこうしたか
普段はブラウザ幅で切り替えてる。
でもifでひたすら分けてると動作がおかしくなったりして、原因漁るのがめんどくさい。
ファイル分けちゃって読み込むのを分けちゃえばいいなって。
今回のでやると例えばPCで幅を狭めた時に機能しないんだけど、そういう輩のことは無視してしまえみたいな。
まあ使い分けで。
例えば
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $(window).on('load resize', function(){ "use strict"; var w = $(window).width(); var x = 767; if (w <= x) { $.ajax({ url: 'sp.js', dataType: 'script', cache: false }); }else{ $.ajax({ url: 'pc.js', dataType: 'script', cache: false }); } }); |
こういうのもありかも知らんけど、
毎度毎度読み込み先変えるのめんどくさいし、
割り切っちゃえばむしろ精神衛生に良いよなって。
コメント