一般的なレスポンシブWebデザインのサイトでは、画面サイズに合わせてレイアウトするため、
ユーザーがPC表示とスマートフォン表示を切り替えることはできませんが、
PC表示も選択出来た方がアクセシビリティが向上する場合もあると思います。
そこで、下記のようなリンクで表示切り替えできるようにしてみます。
追記：WordPressテーマとプラグインを作成しました。
仕組み
- ユーザーがスマートフォンなら切り替えリンクを表示
- Viewportを変更して表示を切り替える
- 表示方法をCookieに保存する
ちなみに、Bootstrapを利用している場合もこの方法で切り替えできます。
HTML
viewport（一般的なレスポンシブの仕様）
<![CDATA[<meta name="viewport" content="width=device-width, initial-scale=1">]]>
表示切り替えリンク
<![CDATA[</p>
<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>
<p>]]>
jQuery
viewportを変更して表示を切り替えます。
width=1280 で強制的に大きな画面サイズにして、initial-scale=0.25 で縮小した状態で表示します。
スマホ端末画面サイズが320pxなら、320/1280=0.25 なのでぴったりPCサイズで表示されます。
<![CDATA[$(function() {<br />
//スマホ判定<br />
if(navigator.userAgent.indexOf(‘iPhone’) > 0 || navigator.userAgent.indexOf(‘iPod’) > 0 || navigator.userAgent.indexOf(‘Android’) > 0){<br />
//スマホなら<br />
if($.cookie(“rwd”)){<br />
mode = $.cookie(“rwd”); //cookieがあれば取得<br />
}else{<br />
mode = “sp”; //なければスマホ表示<br />
}<br />
if(mode == “pc”){<br />
//pc表示ならviewportを変更<br />
$(‘meta[name=”viewport”]’).attr(‘content’, ‘width=1280, initial-scale=0.25′);<br />
}<br />
//表示切り替えクリック<br />
$(“.rwd_pc”).click(function(){<br />
$.cookie(“rwd”,”pc”,{path:’/’}); //cookie保存<br />
url = location.href;<br />
location.href = url;<br />
return false;<br />
});<br />
$(“.rwd_sp”).click(function(){<br />
$.cookie(“rwd”,”sp”,{path:’/’}); //cookie保存<br />
url = location.href;<br />
location.href = url;<br />
return false;<br />
});<br />
}else{<br />
//PCなら表示切り替えリンク表示しない<br />
$(“.rwd”).hide();<br />
}<br />
});]]>
サンプル
このサイトをスマートフォンで見るとページ下部のリンクで切り替えできます。
WordPressテーマ
PC/スマホ表示切替機能が付いたレスポンシブWordPressテーマを作りました。
LIQUID PRESS
WordPressプラグイン
公式WordPressプラグインを作りました。
既存のレスポンシブテーマで、スマホ/PC表示切替ができます。
LIQUID RWD PLUS
