[JavaScript]URLパラメータを継承しつつスマートフォン用のページへリダイレクト

PC用のURLからスマートフォン用のページへリダイレクトさせる際に、URLパラメータを継承したまま遷移する方法の備忘メモになります。

リダイレクト元に下記のコードを追加することで実現できます。

仕様

• PC→スマートフォンページへのリダイレクトを想定
• 同一ドメイン内のページに遷移するものとする
• 同一のパラメータを継承するものとする
• スマートフォン判定は、ユーザーエージェントもしくはウィンドウの横幅を基準にする

コード

リダイレクト元、今回の場合はPC用ページに以下のコードを追加します。

(function(){
  let domainRoot = window.location.protocol + '//' + window.location.host;
  let parameter = document.location.search;
  let windowWidth = window.innerWidth;
  let bp = 750; // ブレイクポイント

  if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i) || windowWidth <= bp){
    location.replace(domainRoot + '/sample.html' + parameter); // リダイレクト先
  } // if
}());

• 5行目の bp という変数でリダイレクト対象となるウィンドウ幅を指定します。
• 8行目の sample.html をリダイレクト先に直せばOKです。

ブレイクポイントを指定するので、 userAgent でモバイルデバイスの指定漏れがあったとしてもウィンドウ幅から判定して遷移させています。
今後モバイルデバイスがどのように多様化していくか分からないので、ユーザーエージェント（userAgent）だけで指定するのは無理があると思うからです。

簡単なコードになりますが、参考になりましたら幸いです。