PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。


このライブラリを利用すると

  1. スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。
  2. PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。
  3. スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります
  4. PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。

個々のページでどのPCページとスマートフォンページが対応しているか設定できるので細かい調整が可能になっています。

利用方法

jQuery本体とダウンロードしたjquery.Pc2Sp.jsを読み込みます。

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

PC用サイトでは次にような設定を行います。

$.switchPc2Sp({
	mode : "pc" ,
	spLinkBlockInPc : "#spLinkBlockInPc" , 
	anchorToPcInSp : "#anchorToPcInSp"
});
#spLinkBlockInPc{
	display:none;
}
<div id="spLinkBlockInPc">
	<a href="sp.html" id="anchorToSpInPc">SPサイト</a>
</div>

このhtmlはスマートフォンで閲覧された場合のみ表示されます。

SP用サイトでは次のように設定をおこないます。

$.switchPc2Sp({
	mode : "sp" ,
	anchorToPcInSp : "#anchorToPcInSp" 
});
<a href="pc.html" id="anchorToPcInSp">PCサイト</a>

対応するスマートフォンとPCサイトのURLはa要素内で設定して下さい。

サンプル

スポンサードリンク

«jQuery Mobile スマートフォンサイト デザイン入門 増刷されました | メイン | Web Designing 06月号のjQuery plugin特集で執筆いたしました»