やりたいこと。
- PCサイトをスマートフォンで見ると、自動的にスマートフォンサイトへ切り替える（振り分ける）。
- スマートフォンサイトでは「PCサイトを見る」ボタンを表示させ、クリックするとPCサイトへ移動する。
- PCサイトでは、スマートフォンのみ「スマートフォンサイトを見るボタン」を表示する。
こんなんどうやって作れん・・・
って調べてたら、まさにドンピシャのjQueryライブラリを発見！
「to-R」で紹介されている「Pc2Sp.js」というライブラリが上の要望を全て満たしてくれる。
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でも使える。
コメント