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特集で執筆いたしました»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/688
コメント

「Pc2Sp.js」を使わせていただいております。

こちらからの問い合わせで大変恐れ入りますが、
ご確認、またはご教授をお願いいたします。

複数のブラウザやユーザーエージェントの切り替えで確認したのですが、
iPhone 5 , iPhone 5s (いずれもVer7.1)において、
(デフォルトの)safariでのみ、「PCサイト」をクリックしても
強制的にSPサイトへ戻されてしまいます。

ChromeのUA変更や、iPhoneの別ブラウザではきちんと動作します。

無料で公開していただいているものに対して恐縮でございますが、
ご教授いただけますと幸いでございます。

大変多くの方が利用されている機能かと存じますので
何卒よろしくお願いいたします。

投稿者:匿名 | 2014年4月 6日 19:49

匿名さんへ。

横入りですみません。

私も同じ現象があり、困っていたところ、
プライベートブラウジングがONになっていると、上記のように強制的にSPサイトへ戻されるようです。

対策はこれから考えてみたいと思いますが、取り急ぎご報告まで

投稿者:匿名2 | 2014年5月27日 12:40

iPhone 5(Ver7.1)safariプライベートモードにおいて、上の方と同様の現象が起こりました。

いろいろ自分なりに調べてみると、
Safariだけの問題のようですがプライベートモードではlocalStorageが動かないということが分かりました。

どうにもならないのでしょうか?

プライベートモード(プライベートブラウズ)の設定は、
http://faq.mb.softbank.jp/detail.aspx?cid=72964&id=72964

投稿者:クマ | 2014年7月17日 14:20

iphone5、Ver8.4.1でも以下のような現象が見られましたのでご連絡致します。

(デフォルトの)safariでのみ、「PCサイト」をクリックしても
SPサイトしか閲覧できません。

投稿者:匿名 | 2016年8月 3日 11:52
コメントを投稿