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

今回やりたいこと

いまどきはレスポンシブサイトが主流なので、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/10/15 JavaScript

Windowサイズが変わった時に行う処理

2019/11/15 JavaScript

Youtubeをポップアップで再生させる方法

2021/07/19 JavaScript

lazyload.jsとスピナーアイコンを組み合わせる

2019/11/19 JavaScript

slideUpやslideDownを使ったときのレスポンシブ対応