スマートフォン端末で電話発信するa要素「tel」をPC版で無効にする方法

2017.03.28 2019.04.04 HP制作

a要素に[href=”tel:電話番号”]を指定すると、電話発信用のリンクを設定することができます。スマートフォンなどではタップするだけで直接電話をかけることが可能になるため、非常に便利な機能です。

新機種が出るたびに増えるスマートフォン

しかし、レスポンシブWebデザインでサイトを構築している場合、パソコンで見ると[href=”tel:電話番号”]が予期せぬ動作をすることがあります。そのため、PCでは[tel]が動作しないように設定しましょう。

[tel]をスマホ以外で無効にする方法

方法は色々あるようですが、HTMLの調整を必要としないシンプルな実装は、jQueryを利用するのが一番良さそうです。

HTML

<a href="tel:0120123456">0120-12-3456</a>

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

jQueryでユーザーエージェント（端末）を判別して、スマートフォン以外の端末では[href=”tel:電話番号”]のリンククリック時のイベントを無効化するようにします。

CSS

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

a要素を消しているわけではないため、このままだとPCではマウスオーバー時にカーソルが指マークになります。そのため、CSSでカーソルをデフォルトにすることで、PC版でのユーザビリティを確保します。

参考サイト：リンクをスマートフォン端末以外では無効にする – Qiita