menu
menu

クッキーでPCとタブレットとスマホを振り分けるJS | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook10
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0

クッキーでPCとタブレットとスマホを振り分けるJS

  • Labs

JavaScript

こんにちは(・∀・)

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


 以前ご紹介しました、クッキーでPCとスマホを振り分けるJSにタブレットが加わりました。

サンプルデモ

 サンプルデモはこちら!


HTML

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

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


<head>
<script src="/絶対パス/style.js"></script>
</head>
<body>
<script src="/絶対パス/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 ChangeStyleBtn(i,p) {
var ciBtn;
var cpBtn;
ciBtn = i;
cpBtn = p;
document.images[ciBtn].src = cpBtn;
}
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) ) {//sp
		document.write('<a href="javascript:void(0)" onclick="ChangeStylesheet(0); return false;">PC</a> | <a href="javascript:void(0)" onclick="ChangeStylesheet(1); return false;">タブレット</a> | <span class="dlk">モバイル</span>');
	} 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) ) {//tab
		document.write('<a href="javascript:void(0)" onclick="ChangeStylesheet(0); return false;">PC</a> | <span class="dlk">タブレット</span> | <a href="javascript:void(0)" onclick="ChangeStylesheet(2); return false;">モバイル</a>');
	} else {//pc
		document.write('<span class="dlk">PC</span> | <a href="javascript:void(0)" onclick="ChangeStylesheet(1); return false;">タブレット</a> | <a href="javascript:void(0)" onclick="ChangeStylesheet(2); return false;">モバイル</a>');
	}
} else if(sv == 0) {//pc
	document.write('<span class="dlk">PC</span> | <a href="javascript:void(0)" onclick="ChangeStylesheet(1); return false;">タブレット</a> | <a href="javascript:void(0)" onclick="ChangeStylesheet(2); return false;">モバイル</a>');
} else if(sv == 1) {//tab
	document.write('<a href="javascript:void(0)" onclick="ChangeStylesheet(0); return false;">PC</a> | <span class="dlk">タブレット</span> | <a href="javascript:void(0)" onclick="ChangeStylesheet(2); return false;">モバイル</a>');
} else if(sv == 2) {//sp
	document.write('<a href="javascript:void(0)" onclick="ChangeStylesheet(0); return false;">PC</a> | <a href="javascript:void(0)" onclick="ChangeStylesheet(1); return false;">タブレット</a> | <span class="dlk">モバイル</span>');
}

/*外部ファイルstyle.jsで保存してください。*/
/*--cookie----------------------------------------------------------*/
name_style = "STYLE";
function  ChangeStylesheet(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;
}
/*------------------------------------------------------------------*/
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) ) {//sp
		document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">');
		document.write('<link rel="stylesheet" href="/絶対パス/style_sp.css">');
	} 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) ) {//tab
		document.write('<link rel="stylesheet" href="/絶対パス/style_tab.css">');
	} else {//pc
		document.write('<link rel="stylesheet" href="/絶対パス/style_pc.css">');
	}
} else if(sv == 0) {//pc
	document.write('<link rel="stylesheet" href="/絶対パス/style_pc.css">');
} else if(sv == 1) {//tab
	document.write('<link rel="stylesheet" href="/絶対パス/style_tab.css">');
} else if(sv == 2) {//sp
	document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">');
	document.write('<link rel="stylesheet" href="/絶対パス/style_sp.css">');
}

関連リンク

 クッキーでPCとスマホを振り分けるJS

 スマホ・タブレット・PCの振り分けいろいろ

  • カテゴリー:Labs
  • facebook10
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0