神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

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

2016.04.25
JavaScript

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

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

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

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

<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サイト → https://ku-su.com/
スマートフォンサイト → https://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 = 'https://ku-su.com/sp/';
}
</script>

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

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

<script src="https://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に端末判別させる記述をしてあげることで抜けなく全てのページで端末判別をしてくれるようになるので、時と場合によって使い分けるようにしましょう!

スポンサーリンク
検 索