スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor
![レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ca8c6cbf4ec6ca8a54fac755a514ba8ec1c7cc9/height=288;version=1;width=512/http%3A%2F%2Fkatoshun.com%2Fblog%2Fwp-content%2Fuploads%2F2012122401-150x150.jpg)