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

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

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

スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。
PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。
スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります
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><a href="sp.html">SPサイト</a></div>

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

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

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

<a href="pc.html">PCサイト</a>

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

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

カテゴリー

アーカイブ

最近のエントリー

Movatterモバイル変換