スマホでPC表示に切り替えられるようにする。

このサイトがかなり参考になる。
http://katoshun.com/blog/switch-screen.html
特に変更する点はないのでそのまま引用する。
html

<ul>
<li><a id="btnPC" href="#">PC</a></li>
<li><a id="btnSP" href="#">SP</a></li>
</ul>

javascript

$("head").append("<meta name='viewport' content="
	+($.cookie("switchScreen") == 1 ? 
		"'width=1024'" : 
		"'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'")
	+" />");

$(document).ready(function() {
	$("#btnPC, #btnSP").click(function() {
		$.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
		location.reload();
		return false;
	});
});

btnPC, btnSPのCSSをいじくってやって、スマホからのみ表示できるようにすればよい。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする