電話番号リンクはPC表示では無効にする

スマートフォンサイトでは、電話番号の画像やテキストに、
00-0000-0000　というリンクをつけることが多くなっていますが、
PC表示では無効にしてあげたほうが親切な場合があります。

方法はいくつかありますが、今回は２つの下記の方法をご紹介します。

１．CSS3のpointer-eventsプロパティ

CSS3ですので、旧IE対応が必要な場合は、次項のJsでの対応をしたほうがよいです

PC版のCSSに、下記を設定。

.tel-link {
pointer-events : none;
cursor:default;
text-decoration:none;
}

HTMLは下記のようにします。

tel:00-0000-0000

２．Jsを使う

まずはjqueryを読み込んで、head内に下記を記述します。

<script>
var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

if (!isMobile) {
$('a[href^="tel:"]').on('click', function(e) {
e.preventDefault();
});
}
</script>

ユーザーエージェントを判別して、スマートフォン以外からのアクセスの場合は、
リンクを無効化するという内容です。
但しリンクのa要素自体は残ってしまうので、CSSでスタイルも少し調整します。

a[href^="tel:"] { cursor: default; }

参考にしたサイト