スマートフォンサイトでは、電話番号の画像やテキストに、
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; }
参考にしたサイト
