PCで閲覧している時とスマホで閲覧している時とで、リンクのURLをPC用とスマホ用とで切り替える方法についてのメモ書きです。

PC用とスマホ用にリンクを切り替える

PC用のURLとして、下記のようなリンクがあったとします。

<a href="https://example.com/pc.html" id="switchLink">リンク</a>

ユーザーエージェントによって上記のリンクを切り替えるので、以下のようなスクリプトを設定していきます。

function linkSwitch($id, $url) {
  var link = document.getElementById($id);
  var ua = navigator.userAgent;
  
  if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) ||
      ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) {
      link.href = $url;
  }
}

これで、ユーザーエージェントがiOS（iPad以外）かAndroidだった場合、該当するIDのURLを指定したものに書き換えることができます。

linkSwitch('switchLink','https://example.com/sp.html');

switchLinkというID名のリンクをhttps://example.com/sp.htmlに書き換えたい場合はこの様に記述して呼び出してあげればOKです。

function linkSwitch($id, $url) {
  var link = document.getElementById($id);
  var ua = navigator.userAgent;
  
  if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) ||
      ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) {
      link.href = $url;
  }
} 

linkSwitch('switchLink','https://example.com/sp.html'); // SP用のリンクを指定

以上がリンクのURLをPC用とスマホ用とで切り替える方法でした。