スマートフォンからのアクセス時にのみ電話番号リンクを有効化して、PC表示では無効化する方法をいくつかまとめていきます。

Contents

  1. 電話番号リンク
  2. jQueryで電話番号リンクをスマホのみ有効にする
  3. CSSで電話番号リンクをスマホのみ有効にする

電話番号リンク

レスポンシブデザインの案件でサイトを制作している際、電話番号を<a href="tel:03-1234-5678">03-1234-5678</a>とする事が多いと思います。こうする事で、スマートフォンからアクセスしている場合、クリックのみで電話がかけられるようになるので大変便利なのですが、PCで閲覧した際もリンクが有効なためクリックできてしまいます。

電話番号リンクの自動設定を無効にする

今回の話とはちょっとズレてしまいますが、スマートフォンの場合、上記のように<a></a>タグで囲んでリンクを設定していない場合でも、電話番号のような数字の文字列に対して自動でリンクを設定してくれる機能があります。ただ、この機能は郵便番号などの数字の文字列に対してもリンクを設定してしまいます。このように、意図しない箇所に勝手にリンクが設定されるのを避けるために、以下を記述しているケースが多いと思います。

<meta name="format-detection" content="telephone=no">

jQueryで電話番号リンクをスマホのみ有効にする

まず、電話番号をaではなく、<span>で囲んであげます。そして、スマートフォンからのアクセス時のみリンクが設定されるよう<a>に置き換えるようにしてあげます。

<!-- .tel-linkという名前のクラスを指定 -->
<span class="tel-link">03-1234-5678</span>

上記のように、電話番号をspanで囲み、任意のクラス名を指定します。

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

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

ユーザーエージェントを使用してディバイスを判別し、もし閲覧しているディバイスがiPhoneやAndroidだった場合、先ほどクラスを指定したspan.tel-linkをaに置き換え、電話番号リンクが設定されるようになります。

因みに、PCから閲覧した場合はspanに囲まれているだけなので、文字列として表示されます。

CSSで電話番号リンクをスマホのみ有効にする

次は、CSSのみで実装できる方法（IEでも11以降であれば使用可能）です。

まずは電話番号をaで囲んであげます。

<a href="tel:03-1234-5678">03-1234-5678<a/>

そして、CSSでパソコンだけ電話番号リンクを無効にするために、リンク要素にpointer-events: none;を指定します。あとは、メディアクエリでスマホとPCを分けて、PCの条件の時にのみ適用させます。

a[href^="tel:"] {  /* hrefがtel:で始まるものに対して */
    pointer-events: none; /* これが重要！ */
  }
}

以上が、電話番号リンクをスマホのみ有効にする方法でした。