WEB ARRANGER Webアレンジャー

WEB ARRANGER – 横浜のWeb制作会社に勤務して10年目ぐらい。今思えば、大したデザインもしてないしクリエイトもしてなく、アレンジしてるだけだよな、と開き直った人間の備忘録としてのブログ

レスポンシブデザインのスマホ版とデスクトップ版の切り替え

「レスポンシブデザインで作られたサイトをスマホ版とデスクトップ版を切替可能にさせる」、という案件がきました。
確かに自分でも強制的にスマホ版を見せられて困ることがあります。
jsによるユーザーエージェントで切り替えているなら、フッター辺りにボタンがあるはずですが、レスポンシブサイトではありません。
そこで検索した結果、「スマートフォンサイトのためのHTML5+CSS3:毎日コミュニケーションズ」に載っているらしく、
あおい書店横浜店にて購入。(ヨ○バシにはなかった、本当に品揃えが悪くなった)

まさに、欲していた内容で、「viewportを動的に切り替えるのかー!」とサンプルのコードを移植し、実現できました。
喜んで帰る電車の中で、スマホにて確認してた際、ページ移動するとスマホ版に戻る・・・、リロードするとスマホ版に戻る・・・
とこれでは使えない内容。案件はECサイトなので。

翌日さらに検索して、ついに発見しました!

「レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた」 30代でWeb業界に転職したアラフォーWebデザイナーの雑記 様
http://katoshun.com/blog/switch-screen.html

jquery.cookie.jsを使用して、表示状態を保存する仕様です。おかげ様で助かりました、帰れました。

このweb-arranger.comにも実装してみました。

さらに、手を加えてスマホで見たときにのみ、ボタンを表示するようにしました。
デスクトップでは必要ないので。