[js]UAで読み込むjsファイルを振り分ける方法

はい

参考

構成

index.html読み込むやつ
trigger.jsUA判別して指定ファイルを読み込む
sp.jsUA別にやりたいこと
tablet.jsUA別にやりたいこと
pc.jsUA別にやりたいこと

こういうのがあるとする。

中身

<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>
$(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で幅を狭めた時に機能しないんだけど、そういう輩のことは無視してしまえみたいな。
まあ使い分けで。

例えば

$(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
});
}
});

こういうのもありかも知らんけど、 毎度毎度読み込み先変えるのめんどくさいし、 割り切っちゃえばむしろ精神衛生に良いよなって。

コメント

タイトルとURLをコピーしました