以前、.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/new/
スマートフォンサイト → https://ku-su.com/new/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/new/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に端末判別させる記述をしてあげることで抜けなく全てのページで端末判別をしてくれるようになるので、時と場合によって使い分けるようにしましょう！
