PC向けサイトにアクセスした際にスマートフォン向けサイトを表示するか選択してもらうスクリプトを書きました。
今回はJavaScriptで作っています。
//iPhone、iPad、AndroidのURLをリダイレクト(選択)させる $(function(){ //ユーザーエージェントを取得 var ua = navigator.userAgent; //スマートフォンの条件の設定 var sp_flag = (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 ) //スマートフォンでしか表示しないボタンを非表示 if(!sp_flag){ $('.sp_btn').remove(); } //ポップアップウインドウを出す設定 if (sessionStorage && !sessionStorage.getItem("sp_flag_set") && sp_flag) { if(confirm('スマートフォン用サイトを表示しますか?')) { location.href ='http://example.com/sp/';//スマートフォンサイトのURLに書き換えてください。 sessionStorage.setItem("sp_flag_set",false); }else{ sessionStorage.setItem("sp_flag_set",true); } } });
こんな動作です
仕様としてはPCサイトのみに今回のスクリプトを設置します。
- スマートフォン(タブレットも含む)でPCサイトにアクセスをした場合のみウインドウが出てスマートフォンサイトがある事を伝えて、どちらのサイトに行くかユーザーに選んでもらいます。
- 一度選択した場合はブラウザを閉じるまで再度どちらのサイトにアクセスするか聞かれません。
- PCサイトではClass(.sp_btn)の付いたコンテンツはスマートフォンでしか表示されないようにしています。
(あとでスマートフォンサイトに移動したくなった時用のボタンを設置するのに使う想定です)
- 今回のスクリプトを作るにあたってこちらのスクリプトを参考にさせてもらいました。
- PCサイトへのアクセスをスマートフォンサイトに転送するJavaScript(寄稿)
- Web Storageは始めて使ったのですが便利ですね。