KUSU'S SITE
2016年4月25日

【JavaScript】JavaScriptで端末判別してサイトを振り分ける方法とは?

  

 以前、.htaccessでPCサイトとスマートフォンサイトのアクセスを振り分けるには?という記事を書きましたが、今回はJavaScriptをページそのものに記述して、アクセスした端末を判別してPCサイトもしくはスマートフォンサイトに飛ばす方法をご紹介したいと思います!

端末判別させるJavaScriptのコード(PC→スマートフォン)

 まず、端末判別させスマートフォンサイトに飛ばすJavaScriptのコードは以下になります。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
location.href = '飛ばしたいスマートフォンサイトのURL';
}
</script>

これをPCサイトのコードのどこかに記述してあげることで、スマートフォンからPCサイトにアクセスがあった時には自動でスマートフォンサイトに飛ばすようになります。

例えば、
PCサイト → http://ku-su.com/
スマートフォンサイト → http://ku-su.com/sp/

とした場合、PCサイトに以下のようにJavaScriptのコードを記述することでスマートフォンサイトに飛ばせるようになります。

<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
location.href = 'http://ku-su.com/sp/';
}
</script>

端末判別させるJavaScriptのコード(スマートフォン→PC)

 続いて、スマートフォンサイトにPCからアクセスがあった際には、PCサイトに飛ばす…という記述方法になります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
$(function(){
var agent = navigator.userAgent;
    if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
	}else{
        location.href="PCサイトのURL";
    }
});
</script>

こちらをスマートフォンページに記述することでPCからアクセスがあった際にはPCサイトに飛ばしてくれるようになります。
基本的にPCからスマートフォンページを見てしまう…ということはあまりないのですが、念のため記述しておくことをオススメします!

まとめ

 今回紹介したコードは、LP(ランディング)ページや1ページ構成のサイトの時に記述すると便利かと思います!
ただ、ページ数が複数あるような普通のサイトの場合でなおかつhtmlファイルで作成しているサイトの場合は全てのhtmlファイルにコードを記述する必要があり、抜けが生じてきてしまう場合があります…。

なので、そのような場合には.htaccessでPCサイトとスマートフォンサイトのアクセスを振り分けるには?で紹介したように.htaccessに端末判別させる記述をしてあげることで抜けなく全てのページで端末判別をしてくれるようになるので、時と場合によって使い分けるようにしましょう!

スポンサーリンク
スポンサーリンク

コメントを残す




CAPTCHA


スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック!
ホームページの制作依頼希望の方はまず↓をタップ!
サービスの詳細

WordPress講習会について

WordPress講習会について
気になる方ははまず↓をクリック!
WordPress講習会について気になる方はまず↓をタップ!
サービスの詳細

TWITTER


ページトップに戻る