menu
menu

キーワード検索

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

  • Labs

JavaScript

こんにちは(・∀・)

今回はクッキーを使ってPCサイト・スマホサイトのCSSを振り分けるJavaScriptをご紹介します。

レスポンシブデザインのメディアクエリでCSSを切り替える方法とは別で、ユーザーエージェントで振り分けて、必要があればユーザーがPCとスマホを切り替えるボタンを使ってCSSを切り替えるという方法のご紹介です。

サンプルデモ

サンプルデモはこちら

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_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> | <span class="dlk">モバイル</span>');
	} else {//pc
		document.write('<span class="dlk">PC</span> | <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(2); return false;">モバイル</a>');
} else if(sv == 2) {//sp
	document.write('<a href="javascript:void(0)" onclick="ChangeStylesheet(0); return false;">PC</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 {//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 == 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の振り分けいろいろ

  • カテゴリー:Labs