Worse is better.😀

デバイスとブラウザ情報をjavascriptで取得して、bodyにクラスとして付与するコード

javascript記事サムネイル javascript

ブラウザやデバイスによって
処理を変えたい時に便利なコード。
コピペですぐお使いいただけます。
(要jQuery)

ソースコードと解説

//ブラウザ判定

var ua = navigator.userAgent.toLowerCase();
var ver = navigator.appVersion.toLowerCase();

// IE(11以外)
var isMSIE = (ua.indexOf('msie') > -1) && (ua.indexOf('opera') == -1);
// IE6
var isIE6 = isMSIE && (ver.indexOf('msie 6.') > -1);
// IE7
var isIE7 = isMSIE && (ver.indexOf('msie 7.') > -1);
// IE8
var isIE8 = isMSIE && (ver.indexOf('msie 8.') > -1);
// IE9
var isIE9 = isMSIE && (ver.indexOf('msie 9.') > -1);
// IE10
var isIE10 = isMSIE && (ver.indexOf('msie 10.') > -1);
// IE11
var isIE11 = (ua.indexOf('trident/7') > -1);
// IE
var isIE = isMSIE || isIE11;
// Edge
var isEdge = (ua.indexOf('edge') > -1);

// Google Chrome
var isChrome = (ua.indexOf('chrome') > -1) && (ua.indexOf('edge') == -1);
// Firefox
var isFirefox = (ua.indexOf('firefox') > -1);
// Safari
var isSafari = (ua.indexOf('safari') > -1) && (ua.indexOf('chrome') == -1);
// Opera
var isOpera = (ua.indexOf('opera') > -1);

$(document).ready(function(){
  if (isOpera) {
    $("body").addClass("js_isOpera");
  } else if (isIE) {
    $("body").addClass("js_isIe");
  } else if (isChrome) {
    $("body").addClass("js_isChrome");
  } else if (isSafari) {
    $("body").addClass("js_isSafari");
  } else if (isEdge) {
    $("body").addClass("js_isEdge");
  } else if (isFirefox) {
    $("body").addClass("js_isFirefox");
  } else {
    return false;
  }
});


  //デバイス判定
  var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
      || 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
  }
})(window.navigator.userAgent.toLowerCase());

$(document).ready(function(){
  if(_ua.Mobile){
  //この中のコードはスマホにのみ適用
   $('body').addClass("js_isMobile");
  }else if(_ua.Tablet){
  //この中のコードはタブレットにのみ適用
   $('body').addClass("js_isTablet");
  }else{
  //この中のコードはスマホ・タブレット以外に適用
   $('body').addClass("js_isPc");
  }
});

if(navigator.platform.indexOf("Win") != -1){
  $('body').addClass('js_isWin');
}else{
  $('body').addClass('js_isNotWin');
}

原理としては、
ユーザーエージェントで
訪問者の情報を取得し、
それをjsで取得して
bodyに適宜クラスを振っています。

対応ブラウザは
Chrome、Firefox、IE(6〜11)、EDGE、Opera。
デバイスはモバイル(スマホ)、
タブレット、PC
を判別可能です。


<body class="js_isChrome js_isPc">

PCのChromeで観た場合の出力例。
bodyにベタベタクラスを
くっつけるのが嫌な人は、
addClassメソッドの
対象オブジェクトを書き換えてお使いください。

コメント

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