<a href="tel:***">リンクをスマートフォン端末以外では無効にする

a要素のhref属性を "tel:***" と設定すると、スマートフォン端末ではブラウザタップから直接電話をかけることが可能になります。

HTML

お問い合わせ：<a href="tel:[phone]">0123-45-6789</a>

非常に利便性の高い実装ですが、レスポンシブWebデザインでサイト制作をする場合には、PC端末等での閲覧・操作時に予期しない挙動となる場合があります。

"tel:" リンクを【スマートフォン端末以外では無効】にする方法はいくつかありますが、

• 「カスタムデータ属性の追加」といったHTML側の調整が必要ない
• 余計なDOMの書き換えが発生しない

という条件では以下のシンプルな実装が考えられます。（jQuery使用）

JavaScript

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();
    });
}

ユーザーエージェントを判別し、スマートフォン端末以外の場合には tel: リンククリック時のイベントを無効化します。

a要素自体はそのまま残るため、マウスオーバー時にはカーソルがpointer（指マーク）となります。
CSSも併せて調整することで、「リンクではない」ということをユーザーに明示できます。

CSS

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