menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【JavaScript】クッキーでスマホ・タブレット・PCを振り分ける

【JavaScript】クッキーでスマホ・タブレット・PCを振り分ける

こんにちは(・∀・)

今回はクッキーを使ってスマホとタブレット、PCを振り分けるJavaScriptをご紹介します。
クッキーでスマホ・タブレット・PCを振り分ける
HTML

<head>内にstyle.jsを読み込みます。<body>内のボタンを表示したい場所にstylebtn.jsを読み込みます。

style.js、stylebtn.js本体のパスとstyle.jsの中に記述してあるCSSのパスは絶対パスにしてください。


<head>
<script src="/js/style.js"></script>
</head>
<body>
<script src="/js/stylebtn.js"></script>
</body>
CSS

/*外部ファイルstyle_pc.cssで保存してください。*/
#wrapper {
  width: 1020px;
  margin: 0 auto;
}

/*外部ファイルstyle_tab.cssで保存してください。*/
#wrapper {
  width: 100%;
}

/*外部ファイルstyle_sp.cssで保存してください。*/
#wrapper {
  width: 100%;
}
JavaScript

/*外部ファイルstylebtn.jsで保存してください。*/
/*------------------------------------------------------------------*/
function ChangeBtn(i,p) {
var iBtn;
var pBtn;
iBtn = i;
pBtn = p;
document.images[iBtn].src = pBtn;
}
if(sv == "") {//null
var ua = navigator.userAgent;
  if( ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ( ua.indexOf('windows') > 0 && ua.indexOf('phone') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('mobile') > 0) ) {//null sp
    document.write('PC | タブレット | モバイル');
  } else if( ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 || (ua.indexOf('windows') > 0 && ua.indexOf('touch') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('tablet') > 0) ) {//null tab
    document.write('PC | タブレット | モバイル');
  } else {//null pc
    document.write('PC | タブレット | モバイル');
  }
} else if(sv == 0) {//pc
  document.write('PC | タブレット | モバイル');
} else if(sv == 1) {//tab
  document.write('PC | タブレット | モバイル');
} else if(sv == 2) {//sp
  document.write('PC | タブレット | モバイル');
}

/*外部ファイルstyle.jsで保存してください。*/
/*--cookie----------------------------------------------------------*/
name_style = "STYLE";
function  ChangeStyle(obj) {
document.cookie = name_style+"="+obj+"; expires=Fri, 31-Dec-2030 23:59:59 GMT; path=/;";
window.location.reload(true);
}
Cookie = document.cookie+";";
cSet1 = Cookie.indexOf(name_style);
if(cSet1 != -1) {
cSet2 = Cookie.indexOf("=",cSet1);
cSet3 = Cookie.indexOf(";",cSet2);
sv = Cookie.substring(cSet2+1, cSet3);
} else {
sv = 0;
}
/*------------------------------------------------------------------*/
var dir ="パスを入力してください";
if(sv == "") {//null
var ua = navigator.userAgent;
  if( ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ( ua.indexOf('windows') > 0 && ua.indexOf('phone') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('mobile') > 0) ) {//null sp
    document.write(' 	 	 	');
  } else if( ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 || (ua.indexOf('windows') > 0 && ua.indexOf('touch') > 0) || ( ua.indexOf('firefox') > 0 && ua.indexOf('tablet') > 0) ) {//null tab
    document.write(' 	 	 	');
  } else {//null pc
    document.write(' 	 	 	');
  }
} else if(sv == 0) {//pc
  document.write(' 	 	 	');
} else if(sv == 1) {//tab
  document.write(' 	 	 	');
} else if(sv == 2) {//sp
  document.write(' 	 	 	');
}
Result

サンプルデモ


関連リンク

【JavaScript】スマホ・タブレット・PCを振り分ける

  • JavaScript PC クッキー スマホ タブレット
このエントリーをはてなブックマークに追加