最近のWebサイト制作では、通常のPCサイトを制作するだけでなく
iPhoneやAndroidのスマートフォンや、iPadなどタブレット向けにそれぞれサイトを用意し、
デバイス毎にアクセスさせるURLを分けることも増えてきました。
その様な場合のデバイス制御に使える(であろう)
iPhone、iPad、AndroidでPC向けサイトへアクセスした際など、
jQuery(JavaScript)を使って簡単に別のURLへリダイレクトさせる方法を紹介してみます。
jQuery(JavaScript)でiPhone,iPad,Android(アンドロイド)を判別してリダイレクト
例として、サイト構成が以下の様なURLとします。
——————————————————-
【PC向けサイト】
http://black-flag.net/sample/pc/
【スマートフォン向けサイト】
http://black-flag.net/sample/sp/
——————————————————-
PC向けサイトにiPhone、iPad、Android(アンドロイド)でアクセスした際に
スマートフォン向けサイトのURLにリダイレクトさせるには
PC向けサイトのHTML内に以下のようなスクリプトを入れ込みます。
◆SCRIPT <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var agent = navigator.userAgent; var redirectPass = '/sample/sp/'; if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){ location.href = redirectPass; } }); </script>
リダイレクトさせるURL(スマートフォン向けサイト)の絶対パス(相対でも可)を
「redirectPass」の変数の中に入れます。
(サンプルではスマートフォン向けサイトへの絶対パスは「/sample/sp/」。)
そこから単純にUserAgentをみて、
iPhone、iPad、Android(アンドロイド)の場合は
「redirectPass」の変数に入れたURLにリダイレクトしています。
※念の為iPod Touch用に「iPod」のUserAgentも入れてあります。
これだけの記述でPCサイトのURLに
iPhone、iPad、Android(アンドロイド)でアクセスした際に
スマートフォン向けサイトのURLにリダイレクトさせることが可能になります。
※上記のスクリプトはPC向けサイトのHTML内に記述します。
ページ数の膨大な大型サイトなどで、
細かなページごとのリダイレクトが必要になる場合はあまり適さないかもしれませんが
小規模サイトなど簡単にデバイスごとにURLを切り替えたい場合などには使えるかと思います。
ご参考までに。。。