レスポンシブレイアウトで構築したWebページの場合、
閲覧している画面サイズによってレイアウトが最適化される構成になるので
PC用レイアウトとスマートフォン用レイアウトを
任意で切り替えることは出来ないものだと思っていたのですが
jQuery等を使ってmetaの「viewport」を切り替えることによって
スマートフォンでもPC用のレイアウトを表示することが可能になるようだったので試してみました。
jQueryでレスポンシブサイトでPC画面とスマートフォン画面の切り替えスイッチを実装する実験
まずは別枠で動作サンプルから。
※サンプル画面はスマートフォンでご確認ください。
「jQueryでレスポンシブサイトでPC画面とスマートフォン画面の切り替えスイッチを実装する実験」サンプルを別枠で表示
ページ下部に「PC」と「SP」のボタンを配置してあり、
それぞれボタンをクリックすることで
PC用とスマートフォン用のレイアウトが切り替わります。
全体構成についてまずはHTMLから。
HTML側にはボタンを2つ設置して
それぞれにIDを付けるだけです。
(その他レイアウト部分のHTMLソースは割愛します。)
◆HTML <div class="switchBtn"> <a href="javascript:void(0);" id="swPc">PC</a><a href="javascript:void(0);" id="swSp">SP</a> </div><!--/.switchBtn-->
CSSに関しては切り替え動作には特に影響しないので
今回は割愛します。
続いてスクリプト。
スクリプト側ではjQueryライブラリファイルと併せて
クッキーを制御する「jquery.cookie.js」プラグインを使用します。
そして実際のPC用レイアウトとスマートフォン用レイアウトの
切り替えボタン動作のスクリプトは以下のようになります。
◆HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/swView.js"></script>
◆SCRIPT(swView.js) $(function(){ btnPc = 'swPc'; btnSp = 'swSp'; btnAcvClass = 'btnAcv'; vpPc = 'width=1024'; vpSp = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'; // ViewPort $('head').prepend('<meta name="viewport" content=' + ($.cookie('swView') == 1 ? vpPc : vpSp) + '>'); setBtn='#'+(btnPc)+',#'+(btnSp); setBtnPc='#'+(btnPc); setBtnSp='#'+(btnSp); $(setBtn).on('click',function(){ $.cookie('swView', $(this).attr('id') == btnPc ? 1 : 0); location.reload(); return false; }); // BtnActive var cookie = $.cookie('btnAcv'); if(cookie == 'acvPc'){ $(setBtnPc).addClass(btnAcvClass); $(setBtnSp).removeClass(btnAcvClass); } else if(cookie == 'acvSp'){ $(setBtnPc).removeClass(btnAcvClass); $(setBtnSp).addClass(btnAcvClass); } $(setBtnPc).on('click',function(){ $.cookie('btnAcv','acvPc',{expires:7, path:'/'}); $(setBtnSp).removeClass(btnAcvClass); $(this).addClass(btnAcvClass); }); $(setBtnSp).on('click',function(){ $.cookie('btnAcv','acvSp',{expires:7, path:'/'}); $(setBtnPc).removeClass(btnAcvClass); $(this).addClass(btnAcvClass); }); });
スクリプト開始部分にある設定値の内容は以下の様になっています。
btnPc = ‘swPc’ | PC画面に切り替えるボタンID名 |
---|---|
btnSp = ‘swSp’ | スマートフォン画面に切り替えるボタンID名 |
btnAcvClass = ‘btnAcv’ | ボタンアクティブ時のクラス名 |
vpPc = ‘width=1024’ | PC画面レイアウト時のViewport値 |
vpSp = ‘width=device-width,… | スマートフォン画面レイアウト時のViewport値 |
これらの設定値を変更することでもろもろ調整が可能になっています。
「jquery.cookie.js」を使用しページ遷移した際でも
viewportの値(レイアウト状態)は引き継がれるようになっています。
ボタンにはそれぞれアクティブ時にクラスがつくようになっていますが
PCで閲覧している場合はボタンをクリックしてもレイアウトは変わらないので
ボタンの装飾を変えると違和感が出てしまうこともあります。
(切り替えボタン自体をiPhone、iPad、Androidの時のみに表示する、
みたいな構成にするのが理想的かもしれません。)
iPhone/iPad/Android以外はボタン非表示サンプルを別枠で表示
※サンプル画面はスマートフォンでご確認ください。
実際、あまり使う機会はないかもしれませんが
レスポンシブレイアウトで構築したWebページでスマートフォンでもPC画面を表示させたい、
というクライアントからの要望はたまにあったりするので
その様な場合にはこういった形で実現できるかと思っています。
今回の切り替えスクリプトでは下記の「A40」さんの記事を参考にさせていただきました。
ありがとうございます。
【参考記事】レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40
jQueryでレスポンシブレイアウトのサイトに切替スイッチを実装する際にぜひ。。。