このエントリーをはてなブックマークに追加

レスポンシブWebデザインで、PCとスマホ表示を切り替える方法

一般的なレスポンシブWebデザインのサイトでは、画面サイズに合わせてレイアウトするため、 ユーザーがPC表示とスマートフォン表示を切り替えることはできませんが、 PC表示も選択出来た方がアクセシビリティが向上する場合もあると思います。 そこで、下記のようなリンクで表示切り替えできるようにしてみます。
chg.png 追記:WordPressテーマとプラグインを作成しました。

仕組み

  • ユーザーがスマートフォンなら切り替えリンクを表示
  • Viewportを変更して表示を切り替える
  • 表示方法をCookieに保存する
ちなみに、Bootstrapを利用している場合もこの方法で切り替えできます。

HTML

viewport(一般的なレスポンシブの仕様)

<meta name="viewport" content="width=device-width, initial-scale=1">

表示切り替えリンク

<div class="rwd"> 表示モード:<a href="javascript:void(0);" class="rwd_sp hidden_sp">スマートフォン</a> | <a href="javascript:void(0);" class="rwd_pc hidden">PC</a> </div>

jQuery

viewportを変更して表示を切り替えます。
width=1280 で強制的に大きな画面サイズにして、initial-scale=0.25 で縮小した状態で表示します。 スマホ端末画面サイズが320pxなら、320/1280=0.25 なのでぴったりPCサイズで表示されます。 $(function() { //スマホ判定 if(navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0){ //スマホなら if($.cookie("rwd")){ mode = $.cookie("rwd"); //cookieがあれば取得 }else{ mode = "sp"; //なければスマホ表示 } if(mode == "pc"){ //pc表示ならviewportを変更 $('meta[name="viewport"]').attr('content', 'width=1280, initial-scale=0.25'); } //表示切り替えクリック $(".rwd_pc").click(function(){ $.cookie("rwd","pc",{path:'/'}); //cookie保存 url = location.href; location.href = url; return false; }); $(".rwd_sp").click(function(){ $.cookie("rwd","sp",{path:'/'}); //cookie保存 url = location.href; location.href = url; return false; }); }else{ //PCなら表示切り替えリンク表示しない $(".rwd").hide(); } });

サンプル

このサイトをスマートフォンで見るとページ下部のリンクで切り替えできます。

WordPressテーマ

PC/スマホ表示切替機能が付いたレスポンシブWordPressテーマを作りました。
LIQUID PRESS

WordPressプラグイン

公式WordPressプラグインを作りました。
既存のレスポンシブテーマで、スマホ/PC表示切替ができます。
LIQUID RWD PLUS

WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter