【Pc2Sp.js】PCサイトとスマホサイトを自動振り分け（切り替えボタン付）

JavaScript

2014.01.302016.03.26

やりたいこと。

こんなんどうやって作れん・・・
って調べてたら、まさにドンピシャのjQueryライブラリを発見！

1.Pc2Sp.jsを使ってみる

まず参考のサイトか上のリンクから「Pc2Sp.js」をダウンロードする。
ダウンロードしたファイルはjQueryの後に読み込む。

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

この２つのファイルはPCサイト・スマートフォンサイト両方で読み込まなければならない。

その後、PCサイトとスマートフォンサイトで別々の JavaScriptを読み込む必要がある。

PCサイトで読み込むのは以下のコード。
スマートフォンでPCサイトを見たら、スマートフォンサイトへ飛ばす用。

$.switchPc2Sp({
    mode : "pc" ,
    spLinkBlockInPc : "#spLinkBlockInPc" ,
    anchorToPcInSp : "#anchorToPcInSp"
});

これだけじゃダメで、PCサイト内にリンクを貼っておく。
この aタグで指定したリンクに自動で飛ぶので、適宜修正。

<div id="spLinkBlockInPc">
    <a href="sp.html" id="anchorToSpInPc">SPサイトを見る</a>
</div>

さらにCSSで、通常は見えないようにしておく。

#spLinkBlockInPc {
    display:none;
}

PCサイトのほうはこれでOK。

スマートフォンサイトで読み込むのは以下のコード。
PCで見たらスマートフォン祭を見たらPCサイトへ飛ばす用。

$.switchPc2Sp({
    mode : "sp" ,
    anchorToPcInSp : "#anchorToPcInSp"
});

こちらにもPCサイトへのリンクを貼っておく。
この aタグのリンクに強制的に異同スルことになる。

<a href="pc.html" id="anchorToPcInSp">PCサイトを見る</a>

こんな感じ。
jQueryMobileでも使える。