PC用とスマホ用のレイアウト切り替えボタンをつくる

WPtouchを使っていた頃にはPC用とスマホ用のレイアウトを切り替えるボタンがありました。
レスポンシブデザインにしてからはいらないかなと思ったんですが、スマホ用のレイアウトではどうしても情報量が少なくなってしまいがちです。
そこでレイアウト切り替えボタンをjQueryで実装してみました。

私のテーマではviewportの記述は以下のようになっています。

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

これをPC用のレイアウトに切り替えるには例えば以下のように変えます。

<meta name="viewport" content="width=1024" />

widthはデザインによって変わると思いますので適宜合わせて下さい。

これをJavascriptで動的に切り替えます。
なお、元々書いていたviewportの記述は消しておきます。
しかし普通に切り替えるとうまくいかないみたいなので、ボタンが押された内容をCookieに保存して切り替えます。
Cookie操作にはjquery.cookie.jsを使いました。

ボタンはスマホだけに表示させればいいので、PHPで書いてユーザーエージェントなどで表示非表示を切り替えたほうが良さげです。

HTMLの記述

<ul>
  <li><a id="btnSP" href="#"><span>スマートフォン</span></a></li>
  <li><a id="btnPC" href="#"><span>デスクトップ</span></a></li>
</ul>

Javascriptの記述

$(document).ready(function() {
  $("head").append("<meta name='viewport' content="
  +($.cookie("switchScreen") == 1 ?
  "'width=1024'" :
  "'width=device-width, initial-scale=1, maximum-scale=1'")
+" />");

$("#btnPC, #btnSP").click(function() {
  $.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
  location.reload();
  return false;
  });
});

これを書いてCSSで装飾して、フッターにこんな感じのボタンが出来ました。

Cookie操作はPHPでもできますが、うまくいかなかったので断念しました。
とりあえず今の形でいこうと思います。