ユーザーエージェントを判定してスマホ用サイトに飛ばす

今回やりたいこと

いまどきはレスポンシブサイトが主流なので、PCとスマートフォンで違うサイト(スマートフォンの場合は/sp)にすることは少なくなってきているかと思います。

ですが、いつか役に立つかもしれないので、今回は、ユーザーエージェントを判定して、スマートフォンでルートにアクセスした場合は、スマートフォン専用サイト(/sp)に転送させるjsを紹介します。

javascript

記述は以下のようになります。


<script type="text/javascript">
  window.addEventListener('load', 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/";
    }
  }
</script>

このコードがあれば、「スマートフォン向けサイトに移動しますか?」のメッセージが表示され、はいを選ぶと/spに転送されます。

ユーザーエージェントの判定はこれ以外の場面でも使うことが多いので覚えておくと便利です。

related article

2019/12/10 JavaScript

slickで現在のページ数 / 総ページ数を表示させる

2020/01/14 JavaScript

.index( )と.eq( )を使った効率的なモーダル表示

2019/10/10 JavaScript

HTML内に書いたjQueryが動かない

2020/01/22 JavaScript

PCとスマホで別の画像に切り替えてくれるjQuery