レスポンシブデザインにしたとき「スマホサイト・PCサイト」を表示するための切り替えボタンを設置する方法

レスポンシブデザインにしたはいいけど、やっぱりスマホからもPCサイトを見れるようにしたい･･･という人のための、切り替えボタンです。

今回は、表示状態（スマホかPCか）をcookieに保存して、ページ移動したときに勝手にスマホサイトに戻らないようにします。


参考というかほぼ丸々使わせていただいたサイト様です

Googleが用意したjQueryを読み込む

<head></head>の中に以下を追加。

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jquery.cookie.jsを読み込む

クッキー操作は、jquery.cookie.jsを使います。

carhartl/jquery-cookie ・ GitHub

右の「Download ZIP」からDL。
srcフォルダに入っている「jquery.cookie.js」を使用します。

HTML

<script type="text/javascript" src="jquery.cookie.js"></script>

記述位置は</body>の直前でもOKですが、viewportを書き換えるjQueryより前に読み込まないと動きません。たぶん！

viewportを切り替えるjQuery

<head></head>の中に以下を追加。

HTML

<script type="text/javascript">
$("head").append("<meta name='viewport' content="
        +($.cookie("switchScreen") == 1 ? 
                "'width=1024'" : 
                "'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;
        });
});
</script>

#btnPCをクリックすると、viewportに"width=1024"がセットされます。（横幅の数値は、ご自身のサイトに合わせて変更してください）

#btnSPをクリックすると、viewportに"width=device-width～"がセットされ、横幅は自動的に端末に合わせられます。

レスポンシブデザインは、viewportの横幅（width）で適用されるスタイルが変わるため、スマートフォンで閲覧していたとしてもviewportの横幅が広く設定されていれば、PC用のCSSが適用されます。

※上記のjQueryは、スマホでのピンチによる拡大・縮小は禁止になっています。

許可する場合は「user-scalable=no」を削除。
または「user-scalable=yes」に変更して下さい。（デフォルトはyesです）

拡大・縮小倍率は、0～10の範囲で設定が可能です。
こちらもお好みで変更して下さい。

「minimum-scale=0.5」　0.5倍まで縮小可能
「maximum-scale=2.0」　2倍まで拡大可能

HTML

切り替えるボタンです。

ULのクラス "switch" はなくても変更しても構いません。
（スマホで見たときだけ切り替えボタンを表示させるときに、後々使います。）

HTML

<ul class="switch">
<li><a id="btnPC" href="#">PC</a></li>
<li><a id="btnSP" href="#">SP</a></li>
</ul>

CSS

CSSで装飾します。
横並び・且つ中央揃えしたい場合はこんな感じに。

CSS

ul.switch{
    text-align: center;　/*ulの中身を中央揃え*/
    padding:0;
}

ul.switch li{
    display: inline-block; /*インラインブロック表示*/
    /display:inline; /*IE対策*/
    /zoom:1; /*IE対策*/
    padding: 0;
}

#btnPC{
    background: #ccc;
    color: #fff;
}

#btnSP{
    background: #726d6d;
    color: #fff;
}

当サイトではフッターに設置しています。
CSSはお好みで変更してくださいね！

以上で、スマホサイト・PCサイトの切り替えボタン設置は終了です。

スマホで見たときだけ切り替えボタンを表示させる方法

jQueryを外部ファイルにしたい場合

<head>の中にごちゃごちゃ書きたくない！

という方は、jQueryを「外部ファイル」にして最後に読み込みましょう。

jsファイル

$("head").append("<meta name='viewport' content="
        +($.cookie("switchScreen") == 1 ? 
                "'width=1024'" : 
                "'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;
        });
});

jQueryを「メモ帳」に貼り付ける。
拡張子を「.js」にして保存する。（ファイル名の後ろに.jsをつければOK）
文字化け・動かないときは、保存するときの「文字コード」に問題あるかも。

今回は「switch.js」で保存したとします。

HTMLに以下を記述。
jquery.cookie.jsを読み込んだあとに、ファイルを読み込みます。

HTML

<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="switch.js"></script>

読み込むのは最後でいいので、記述は</body>の直前でOK。

理屈はよく分からないけど、クッキー操作のファイルを読み込んだあとにスイッチJSを読み込まないと、動きませんでした！なんでだろう！