40歳のかあちゃんが仕事復帰を目指すブログ

mmt45

同一html内でPC用とスマホ用の振り分けのjs

  • Date 2014.08.20
  • Category Web

よく使いそうな感じのメモです。
メディアクエリではなくて単純に振り分けです。

<style type="text/css">
//CSS
#pcOnly {
     display:none;
}
#spOnly {
     display:none;
}
</style>

//JS
<script type="text/javascript">
$(window).load(function () {
     if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
          //alert("スマホ用");
          $('#spOnly').css('display','block');
     } else {
          //alert("PC用");
          $('#pcOnly').css('display','block');
     }
});
</script>

//HTML
<div id="pcOnly">  
</div>

<div id="spOnly">
</div>

Latest Entry

Category

Archive