レスポンシブレイアウトで構築した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でレスポンシブレイアウトのサイトに切替スイッチを実装する際にぜひ。。。
便利なjQueryのコードをいつもありがとうございます！
今回の切り替えスイッチですが、WordPressでサイトを運営する際に簡単に追加できると便利かなと思いまして、プラグイン化してみました。
http://wordpress.org/plugins/viewport-exchanger/other_notes/
紹介されているコードをベースに、WordPressプラグインとして使える様に調整を入れたものになっていますが、
こういった形で利用させて頂いても構いませんでしょうか？
もし問題がございましたら、すぐにプラグインを取り下げたいと思います。
よろしくお願いします。
＞Hidetaka Okamotoさん
コメントありがとうございます。
WorPressプラグイン化について
その様な形でご使用いただくことに関して
問題御座いません。（むしろ光栄に思っております）
ご丁寧にご報告いただき
ありがとうございました。
他にも色々と紹介させていただいておりますので
あれこれご活用いただけると幸いです。
よろしくお願いします。
ありがとうございます！
ついでのお願いとなりますが、Readmeなどでこちらのサイトについて紹介させて頂いても構いませんか？
[WordPress]レスポンシブテーマを固定化する方法と、プラグイン | WP-kyoto | 2014.06.30 21:06
[...] jQueryでレスポンシブサイトでPC画面とスマートフォン画面の切り替えスイッチを実装する実験 | BlackFlag [...]
＞Hidetaka Okamotoさん
Readmeなどに記載いただく件についても
問題御座いません。
わざわざその様にご紹介いただけるとのこと
誠にありがとうございます。
よろしくお願いします。
はじめまして。スライドショーのスクリプト使わせていただきました。
大変感謝しております。m(__)m
この記事のスプリクトも是非、使わせていただきたいのですが
スマホのピンチが使えるようにできないかと
vpSp = ‘width=device-width,…の所を
width=device-width, initial-scale=1.0, user-scalable=yes
に、変更するとピンチは出来るようになりましたが
パソコンとの切り替えができなくなりました。
そのようには、出来ない仕様でしょうか？
お教えいただけましたら、幸いです。
＞kotaniさん
コメントありがとうございます。
当記事の切り替えスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
こちらでサンプルファイルを元に同様に検証（iPhoneのみ）してみたところ
ピンチインピンチアウトもPC画面との切り替えも正常に動作しました。
サンプルファイルから編集したとしても
同様の現象が起こりますでしょうか。
ご確認ください。
よろしくお願いします。
お忙しいところ、お返事ありがとうございました。
すみません、サンプル以外のスプリクトも一緒に使っていましたので
その辺が問題かもしれませんね？
読み込むjqueryのバージョンも違っていましたが、新しい分には
問題ないのではと思いました。
＜script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”＞＜/script＞
＜script type=”text/javascript” src=”assets/js/scrolltop.js”＞＜/script＞
＜script src=”assets/js/slide.js”＞＜/script＞
＜script src=”assets/js/jquery.cookie.js”＞＜/script＞
＜script src=”assets/js/swView.js”＞＜/script＞
↑のようにスクリプトを複数使用（slimmenu.jsをbody内に使っていたり、複眼ブロクパーツなど）
していますので、まずはシンプルな内容にして、サンプルファイルを元に再チャレンジしてみます。
お手数おかけしてしまって、申し訳ありませんでした。
こんにちは。
無事、ピンチインピンチアウトもPC画面との切り替えも正常に動作しました。
原因は、ｊｓファイルをTeraPadで編集した際に、上書き保存をしたら
Shift-jisで保存されてしまったせい？かもしれません。
編集してファイルをUPして、スマホの画面でパソコンへの切り替えボタンを押すと
画面が真っ白になっていました。
文字コードをUTF-8Nで保存したら、ちゃんと動作しました。
私の知識不足で、お騒がせして申し訳ありませんでした。m(__)m
＞kotaniさん
ご報告ありがとうございました。
問題も解消され、無事に理想とされている動作が
実装できたようで安心致しました。
他にもいろいろと紹介させていただいておりますので
あれこれお試しいただけると幸いです。
よろしくお願いします。
はじめまして。
とても参考になりました。
ありがとうございます。
一つ質問があるのですが、スマートフォンからPCへの切替時に、
切り替えたときにPCサイトの上から表示させることは可能でしょうか。
切替ボタンは下についている場合、切り替えたときに表示位置が一番下のままでしたので。
お手数ですがよろしくお願いいたします。
＞konemiさん
コメントありがとうございます。
当記事の切り替えスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
切り替え時にスクロール位置をページ上部にするには
スクリプト14行目と15行目の間にスクロール位置を指定する
——————————————
＄（’body’）.scrollTop（’0’）;
——————————————
を追記することで実現できるかと思います。
※上記をコピペする際には全角になっている部分を半角に書き換えてください。
お試しください。
よろしくお願いします。
はじめまして。
今回、クライアントからの無理難題で、記事を参考にさせて頂きました。
切り替え自体の問題は全くないんですが、例えば、PC表示に切り替えて、そのままPC表示の状態で、
他のページへ移動すると、またスマホ表示になってしまったり、切り替えを維持できません。
そして、スマホページで、PC表示に切り替えて、一旦ページを閉じ、再度検索して表示を見ると、
PC表示の履歴が残っている為、スマホ表示から始まってくれません。
おそらくキャッシュの設定を変えればいいのかもしれませんが、経験が浅くアドバイス頂けますでしょうか？
宜しくお願い致します。
＞tuffgongさん
コメントありがとうございます。
当記事の切り替えスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
おそらくcookieの設定の問題だと思われますので
スクリプトの方、再度調整してみました。
記事内のスクリプトおよびダウンロードサンプルファイルを
更新してありますのでご確認いただければと思っております。
（再検証の際にはブラウザのcookieを一度削除してからお試しください）
よろしくお願いします。
black-flagさん
迅速な返信ありがとうございます！
記事を利用させていただき、それだけでも、有り難いことなのに、
新たにスクリプトを修正していただき感謝します。
自分の知識の少なさが情けありませんが、参考にさせていただきます。
ありがとうございました!
black-flag様
実用性の高いスクリプト感謝しております。
一つ、質問させていただいても
よろしいでしょうか。
ＰＣ⇔スマホの表示を切り替える際に
サイト内で共用ＳＳＬを設定している場合
ドメインがhttp ⇒httpsに変わったり
さくらサーバーの場合
ドメイン名/
↓
ドメイン名.sakura.ne.jp/…という風に変わる場合は
他のページでの切り替え状態を維持して、表示させることは不可能でしょうか？
お教えいただけると助かります。
よろしくお願いいたします。
はじめまして。
お忙しいところ申し訳ございません。
どのサイトよりも参考になり、無事切り替えを実現することが出来ました。
ありがとうございます。
一つお伺いしたいことがあるのですが、
私のサイトも、tuffgongさんと同じ現象が起きてしまっています。
PC表示に切り替えて、そのままPC表示の状態で、他のページへ移動すると、
またスマホ表示になってしまい、切り替えを維持できません。
そして、スマホページからPC表示に切り替えて、一旦ページを閉じ、再度検索して表示を見ると、
PC表示の履歴が残っている為、スマホ表示から始まってくれません。
記事内にある最新のスクリプトを使用させて頂いたのですが、
やはりcookieの設定に問題があるのでしょうか。
お手数おかけしますが宜しくお願い致します。
＞yoshidaさん
コメントありがとうございます。
当記事の切り替えスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
そのような構成で動作を検証したことがないのですが
「jquery.cookie.js」にてcookieに保存する内容に
ドメインの指定も可能なので
「jquery cookie ドメイン」で検索していただき
cookie部分にドメインの設定をお試しいただければと思います。
よろしくお願いします。
＞srmseimさん
コメントありがとうございます。
当記事の切り替えスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
サイトを確認させていただいたところ
トップページのみスクリプトが実装されており
その他のページに関してはスクリプト及びcookieファイルについても
読み込まれていないようでした。
この動作はすべてのページに実装する必要がありますので
まずその部分からご確認いただければと思っております。
よろしくお願いします。
BlackFlagさま
迅速なご返信、誠にありがとうございます。
初歩的なミスで大変申し訳ありませんでした。
無事、全ページでの切り替えが出来ました。
一点だけお伺いしたいことがあるのですが、
「デスクトップ版」をクリックしトップページを表示すると、
サイドバーに配置してあるグーグルアドセンスが
レスポンシブ用にも関わらずはみ出して表示されます。
そこから別のページに移動すると、その画面に合ったサイズが自動調整で表示されるので、
恐らく読み込みが遅れているだけだと思うのですが、
どうしてもトップページから正常サイズにしたいと思っています。
何か方法がありましたらご教示して頂けませんでしょうか。
お手数おかけしますが何卒宜しくお願い申し上げます。
＞srmseimさん
全ページの無事に動作したようで安心致しました。
Google Adsenceの動作に関しては
なにかスクリプト制御を加えたことによって発生した問題に対して
こちらでは保障することができない為
回答は控えさせていただきたいと思います。
よろしくお願いします。
black-flag様
ご返信
ありがとうございます！
＞「jquery.cookie.js」にてcookieに保存する内容に
＞ドメインの指定も可能なので
＞「jquery cookie ドメイン」で検索していただき
＞cookie部分にドメインの設定をお試しいただければと思います。
承知しました！
調べてみます。
以上
失礼いたします。
BlackFlag様
ご返信ありがとうございます。
承知致しました。
何とか対処してみます。
切り替えスクリプトのご説明、本当にありがとうございました。
BlackFlag様
お世話になっております。
昨年、BlackFlag様のサイトを参考に「スマホ表示：PC表示」の切り替えを実装させて頂きました者でございます。その節は本当にありがとうございました。
今回、どうしても自己解決できないものがありましてお問い合わせさせて頂きました。
URLに記載したサイトの全ページ右上ヘッダー部分に、全く同じ文章をコピーで記載しているのですが、「majorproduction.html」と「top100.html」の2つのページだけ、スマホ（表示モード：デスクトップ版）で見るときに限り、段数が異なって表示されてしまいます。
PCで見るときや、「表示モード：スマートフォン版」で見るときは全く問題はないのですが…そのように表示されてしまう原因がわかりません。
正確に言えば、正しいページでは3行で表示されているのですが、「majorproduction.html」と「top100.html」のページだけは4行表示になってしまいます。
他のページをコピーして、最初から作り直しても、この2つのページだけは4行表示のままです。
もしかしたら「viewport」の変更が原因なのかもしれませんが、もし可能でしたら是非解決策を教えて頂ければと思います。
お手数おかけして申し訳ございませんが、 何卒宜しくお願い申し上げます。
＞srmseimさん
事象確認させていただきましたが
該当箇所だけでなく、ページによってフォントのベースサイズが変わってしまって
全体のフォントサイズが大きくなったり小さくなったりしているように見えますので
ページによってのベースフォントサイズを揃えるか
ヘッダーの該当箇所のテキストのみ「px」などの相対サイズではない値で
指定してみてはいかがでしょうか。
お試しください。
よろしくお願いします。
ご返信、誠にありがとうございます。
そのような不具合が起きているとは知らず、申し訳ございません。
私のiphoneから見ると正常に表示されるのですが、是非解決したいと思っています。
スマホで見る「デスクトップ版」の、
各ページのベースフォントサイズというのはどのようにすれば揃えられるのでしょうか。
初歩的な質問で大変申し訳ございません。
是非ご教授いただければと思います。
お忙しい中申し訳ございませんが、何卒宜しくお願い申し上げます。
＞srmseimさん
フォントのベースとなるサイズについてはCSSで指定しますが
「css フォント サイズ 統一」などで検索すると
フォントのサイズ指定のやり方が色々出てくるかと思いますので
確認してみていただければと思います。
よろしくお願いします。