最近レスポンシブサイトが増えてきました。スマートフォン用のサイトにはPC用を表示するボタンがついていますが、その機能を実装する方法を紹介いたします。javascriptを使用いたします。
HTML側の記述
[html]
<ul>
<li><a id="btnPC" href="#">PC</a></li>
<li><a id="btnSP" href="#">SP</a></li>
</ul>
[/html]
Javascript側の記述
[js]
$("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;
});
});
[/js]
name=’viewport’を利用する方法みたいですので、PCでは動作確認ができません。
※name=’viewport’はスマートフォンのみで効きます。
参考サイト：レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた
http://katoshun.com/blog/switch-screen.html