少し前に「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別して
URLをリダイレクトする方法」と題して、
スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しましたが、
ユニクロさんやほぼ日さんのサイトではスマホ系デバイスでアクセスすると
アラートでスマホ向けのサイトがあることをメッセージで促し、
どっちのサイトへアクセスするかユーザーに選択させる方式をとっており
このUIがおもしろかったので試しにｊQueryを使って同じ動作を作ってみました。
jQuery（JavaScript）でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト（選択）させる方法
例として、サイト構成が以下の様なURLとします。
——————————————————-
【PC向けサイト】
ｈｔｔｐ：//black-flag.net/sample/
【スマートフォン向けサイト】
ｈｔｔｐ：//black-flag.net/sample/sp/
——————————————————-
PC向けサイトのURLにiPhone、iPad、Android（アンドロイド）でアクセスした際に
「スマートフォン向けサイトに移動しますか？」というメッセージをアラート表示させ
「OK」を押すとスマートフォン向けのサイトにリダイレクトさせます。
この動作を実行させるスクリプトは以下のようになります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
redirect();
}
});
function redirect(){
if(window.confirm('スマートフォン向けサイトに移動しますか？')){
location.href = "sp/index.html";
}
}
</script>
UserAgentを判別してiPhone、iPad、Android（アンドロイド）の場合は
メッセージ付きの確認用アラートを表示して「OK」を押すと
スマートフォン向けのURLへ遷移させています。
※念の為iPod Touch用に「iPod」のUserAgentも入れてあります。
動作サンプルについては以下のリンクからサンプルページを開いてください。
※iPhone、iPad、Androidでアクセスしてください。
（PCでアクセスしてもアラートは表示されません。）
このままだとPCサイトにアクセスする度にアラートが表示されることになります。
それが煩わしい場合はCookieを使ってアクセス制御することも可能です。
以前の記事「jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法」と
併せる事で、サイトへ初回アクセスのみにアラートを表示することもできます。
初回アクセスのみの制限を付けたスクリプトは以下のようになります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
if(!($.cookie('access'))){
redirect();
}
}
$(window).load(function(){
$.cookie('access',$('body').addClass('access'));
})
});
function redirect(){
if(window.confirm('スマートフォン向けサイトに移動しますか？')){
location.href = "sp/index.html";
}
}
</script>
「jquery.cookie.js」を使ってクッキー処理をしています。
こっちの動作サンプルについては以下のリンクからサンプルページを開いてください。
※iPhone、iPad、Androidでアクセスしてください。
（PCでアクセスしてもアラートは表示されません。）
≫アラートリダイレクトサンプル（初回アクセスのみアラートが表示されます）
PC向けとスマートフォン向けにリダイレクトさせる方法はさまざまですが
この様にアラート表示にてユーザーにどちらにアクセスするか選択させる方法も良いかと思います。
ご参考までに。。。