レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた

スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。
通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。
そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。

仕様

今回実装してみたのはこんな感じのやつです。

このボタンを以下のような仕様で実装します。

• 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える
• 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる

実装方法

基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。

PC用のviewportの記述

<meta name="viewport" content="width=1024" />

スマートフォン用のviewportの記述

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

ただ、viewportはロード後にJavaScriptで動的に切り替えてもうまく動作しないようです。
そこでボタンを押すたびに押された内容をCookieに保存し、一度リロードして、ロードのタイミングでviewportを切り替えるようにしました。
いずれにせよ表示状態をCookieに保存する予定でしたので、一石二鳥です。
なお、Cookie操作には、jquery.cookie.jsを使用しています。

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;
	});
});

デモ

こちらからデモをご覧いただくことができます。
※スマートフォンでご覧ください。

デモ

そもそもレスポンシブWebデザインは、PCサイトとスマートフォンサイトで同等の情報を持つことができるので、わざわざ表示を切り替える必要性は低いかもしれませんが、場合によっては切り替えられた方が良いこともあります。
ご参考にしてみてください。