戻る

JavaScriptを使ってユーザーエージェントで振り分ける

注：Google Chromeはローカル環境でクッキーを作りません

pc.html

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.cookie.js"></script>
<script>
$(function(){
	
	/*---------------------------------------
	クッキーないとき
	*/
	if(!$.cookie("access")){

		//ユーザーエージェントがスマートフォンならスマートフォンサイトを表示
		if(navigator.userAgent.indexOf("Android") != -1 || navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPod") != -1){
			window.location.href="sphone.html";
		}
		//それ以外はクッキーにpcを記録
		else{
			$.cookie("access","pc",{expires:30});
		}
	}
	
	/*---------------------------------------
	クッキーがsphoneのときスマートフォンサイトサイトを表示
	*/
	
	else if($.cookie("access") == "sphone"){
		window.location.href="sphone.html";
	}
	
	/*---------------------------------------
	ボタンが押されたとき
	*/
	$("a").click(function(){
		$.cookie("access","sphone",{expires:30});
		window.location.href="sphone.html";
	});

});
</script>
<title>PCサイト</title>
</head>
<body>
<h1>PCサイト</h1>
<p><a href="#">スマートフォンサイトへ</a></p>
</div>
</body>
</html>

sphone.html

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.cookie.js"></script>
<script>
$(function(){
	
	/*---------------------------------------
	クッキーがないときPCサイトを表示
	*/
	if(!$.cookie("access")){

		//ユーザーエージェントがスマートフォンでなければPCサイトを表示
		if(navigator.userAgent.indexOf("Android") == -1 && navigator.userAgent.indexOf("iPhone") == -1 && navigator.userAgent.indexOf("iPod") == -1){
			window.location.href="pc.html";
		}
		//それ以外はクッキーにsphoneを記録
		else{
			$.cookie("access","sphone",{expires:30});
		}
	}
	
	/*---------------------------------------
	クッキーがpcのときPCサイトを表示
	*/
	else if($.cookie("access") == "pc"){
		window.location.href="pc.html";
	}
	
	/*---------------------------------------
	ボタンが押されたとき
	*/
	$("a").click(function(){
		$.cookie("access","pc",{expires:30});
		window.location.href="pc.html";
	});

});
</script>
<title>スマートフォンサイト</title>
</head>
<body>
<h1>スマートフォンサイト</h1>
<p><a href="#">PCフォンサイトへ</a></p>
</div>
</body>
</html>

inserted by FC2 system