レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた
2012年12月24日
スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。
通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。
そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。
仕様
今回実装してみたのはこんな感じのやつです。
このボタンを以下のような仕様で実装します。
- 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える
- 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる
実装方法
基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。
<meta name="viewport" content="width=1024" />
<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を使用しています。
<ul> <li><a id="btnPC" href="#">PC</a></li> <li><a id="btnSP" href="#">SP</a></li> </ul>
$("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サイトとスマートフォンサイトで同等の情報を持つことができるので、わざわざ表示を切り替える必要性は低いかもしれませんが、場合によっては切り替えられた方が良いこともあります。
ご参考にしてみてください。