【レスポンシブ対応】スマホ表示のときだけ電話番号のリンクを有効にする方法

2021年1月7日 2021年1月7日

こんにちは！CodeClub965のKです！

今回は前回の記事の続きになります！
前回の記事を読んでいない方は特に難しい内容ではないので読んでみてください！

https://codeclub.commits.work/?p=1025

今回は、スマホ表示のときだけ電話番号をタップした時に電話発信する方法について紹介したいと思います。

方法としては以下の2種類の方法があります。

・CSSで対応する方法
・JavaScript(jQuery)で対応する方法

順番にやっていきましょう！

CSSで対応する方法

電話番号のリンクをスマホ表示の時だけ有効にする方法を説明します。
CSSだけで対応可能なので、簡単に実装できる方法かと思います。

具体的な例をみながら説明します。

例えば下のような記述をしたとします。

<a href="tel:080-0000-0000">080-0000-0000</a>

この記述に対して、スマホ表示の時だけリンクを有効にするには、CSSで以下のように定義します。

@media (min-width: 361px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

上の記述した定義を簡単に説明すると、表示している端末の横幅によってリンクを有効にするか無効にするかを決めています。

「min-width」は要素の最小幅を設定する時に使います。
なので上記では、端末の画面表示の横幅が361px以上（PCやタブレット）であれば、電話番号のリンクは無効にしますよという定義になります。

逆に横幅が360px以下（スマホ）の場合は、電話番号のリンクが有効のままです。

横幅の定義は各々で変わると思うので必要に応じて変更しましょう！

JavaScript(jQuery)で対応する方法

JavaScriptと記載していますが正確にはjQueryを使った方法になります。
（jQueryはライブラリですが、中身はJavaScriptで構成されているので..）

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

<span class="tel-link">080-0000-0000</span>

CSSで対応した時と違い、<span>タグで囲みます。（CSSではaタグで囲んでましたね！）

あとは以下の記述（jQuery）を書くだけです。

$(function() {
  var ua = navigator.userAgent;

  if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
    $('.tel-link').each(function(){
      var str = $(this).text();
      $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
    });
  }
});

これだけで、スマホ表示の時だけ電話番号リンクを有効にできます。