viewportをボタンのクリックで切り替える方法
レスポンシブデザインの簡単な説明は
レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するを参照の事。
レスポンシブデザインとは、簡単に言うとメディアの幅によって、CSSの挙動を制御すること。
今まではiPadだったらこのページ、iPhoneだったらこのページという風に、スマホサイト、タブレットサイト、PCサイトを別々に用意していた。
 
しかし、これではiPhoneでデカい画面のスマホが出てきたらどうするの？
小さいブラウザウィンドウで見ているPCはバカでかいPC用ページで表示、という問題には対応できない。
そこで、端末が何かにかかわらず、メディアの幅（ブラウザ・スマホ画面の幅）によって見え方を変えようというわけだ。
で、レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するの後半にも書いてある通り、メディアアンカーを使っていく。
でも、スマホでもPCサイトに切り替えたい！というニーズもある。
こういった場合には、レスポンシブサイトに対応した、PCサイト/スマホサイトの切り替えスイッチが欲しい。
レスポンシブに置いて、PC/スマホの切り替えとはつまり？
CSSの中に、「画面が600ピクセル以上の場合はこれ、600ピクセル以下の場合はこれ」と記述しているので、これを切り替えるためには、メディアの幅が変わったと思わせればいい。
用意するものは3つ。
jquery-1.5.min.js
switch.screen.js
jquery.cookie.js
こちらから右クリックで保存したり、ダウンロードすることもできるし、どこかから探してきてくれてもOK。
なお、jqueryは1.5以外でも結構動作する。
準備とアップロード
まず、switch.screen.jsの3行目
$(“head”).append(“<meta name=’viewport’ content=”
+($.cookie(“switchScreen”) == 1 ?
“‘width=951, initial-scale=1.0′” :
“‘width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0′”)
+” />”);$(document).ready(function() {
$(“#btnPC, #btnSP”).click(function() {
$.cookie(“switchScreen”, $(this).attr(“id”) == “btnPC” ? 1 : 0);
location.reload();
return false;
});
});
“‘width=951, … の部分をメディアアンカーの幅に合わせる。
上記の例の場合、「メディア(スマホの画面)の幅を951pxとして考えてね」ということなので、仮に小さいスマホであっても、レスポンシブのPCサイトのスタイルシートが適用される。
そしてサーバーの適当な位置へアップロード。
下記、コード例では、jsフォルダへアップロードした場合の記述。
HTMLのソース
<head>…</head>の間に、下記コードをコピペ。
<head>
…
<script type=”text/javascript” src=”js/jquery-1.5.min.js”></script>
<script type=”text/javascript” src=”js/jquery.cookie.js”></script>
<script type=”text/javascript” src=”js/switch.screen.js”></script>
…
</head>
切り替えスイッチ（リンク）を設置したい場所に、下記コードをコピペ。
<p class=”switch”><a id=”btnPC” href=”#”>PCページへ</a><a id=”btnSP” href=”#”>スマホページへ</a></p>
以上。
使用例：
http://rakuichi-b.com/
パソコンのブラウザの画面幅を小さくしたり大きくしたりして確認できる。
なお、上記のサイト例では切り替えボタンはスマホでのみ有効となっている。
