2015年版 jQueryでUA(User agent)判別のまとめ | 東京都世田谷区　ホームページ制作　[k]id

最近のUA判別

レスポンシブWEBデザインによりUA(User agent)判別がより細かく指定してあげないと、
思わぬところで表示が崩れたりするケースが出てきました。

さらにWindows IEをどこまで対応させるかで構築時の工数がだいぶ変わるので、
どこかで線引きをしなければなりません。
そこで大きく分けると

・タブレット
・スマホ
・Old Internet Internet Explorer
・それ以外のブラウザ

とおおまかに４タイプに分ける事にしています。
そこで最近使用しているJQueryによる機種判別方法をまとめてみました。

判別方法

下記を記述しています。

var _ua = (function(u){
return {
Tablet:u.indexOf("ipad") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) || u.indexOf("kindle") != -1 || u.indexOf("silk") != -1 || u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1) || u.indexOf("iphone") != -1 || u.indexOf("ipod") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) || u.indexOf("blackberry") != -1,
IE:u.indexOf('msie') != -1 || u.indexOf('trident') != -1
}
})(window.navigator.userAgent.toLowerCase());
var _ap = (function(ap){
return {
OldIE:
ap.indexOf("msie 6.") !=  -1 || 
ap.indexOf("msie 7.") !=  -1 || 
ap.indexOf("msie 8.") !=  -1 || 
ap.indexOf("msie 9.") !=  -1
}
})(window.navigator.appVersion.toLowerCase());

if(_ua.Mobile){ //Mobile
var ua_num = 3;
}else if(_ua.Tablet){ //Tablet
var ua_num = 2;
}else if(_ua.IE && _ap.OldIE){ //OLD IE
var ua_num = 1;
}else{
var ua_num = 0;
}

利用方法

スマホのみに適用したい場合は

if(ua_num == 3){
//処理
}else{
//それ以外の処理
};

という感じで個別に指定する事ができます。
Old IE　を含むPCに指定したいという場合は

if(ua_num <= 1){
//PCのみ処理
}else{
//それ以外の処理
};

という感じで指定する事ができます。