menu
menu

キーワード検索

 

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

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

JavaScript

こんにちは(・∀・)

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

サンプル
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

サンプルデモはこちら


関連リンク

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

  • カテゴリー:Labs