スマホで電話発信できるa要素「tel:」をPC版で無効にする方法

こんにちは！社員Aです👩

今回は、スマホで電話発信できるa要素「tel:」をPC版で無効にする方法をご紹介します！

スマホでは便利なa要素「tel:」がPCではやっかいに…

a要素のhref属性に「tel:」を付けると、スマートフォンからはタップすることで直接電話発信できますが、PC版のときは、基本的には電話発信できません。

PC版とスマートフォン版を別々に作成している場合は心配無用ですが、基本的にレスポンシブで作成するときはこの部分の対応が必要になってきます。

コーディングあるあるなのかもしれないですが、スマホだけこの「tel:」を有効にし、PCの時はリンクしないようにするために悩んだ経験があります。

弊社では基本的にコーディング時はBootstrapを使用しているのですが、私個人的にはBootstrapの表示・非表示クラスを使用して、電話番号の部分を2つ用意し、片方はdisplay:none;になるようにしていました。

ただ、これは少し非効率で電話番号が変更になった時に2つ設置していることで変更し忘れたり、他のコーダーさんが修正するときに見にくく感じる場合があります。

a要素「tel:」をスマホ時だけ有効にする方法

ここからは、a要素の「tel:」をスマホ時だけ有効にする方法をご紹介していきたいと思います。

方法1.CSSのpointer-eventsで対応

リンクにカーソルを当てると自動的に「指カーソル」になりますが、これをPC時に無効にするやり方です。

ユーザーから見ると「指カーソル」が表示されませんので、リンクと認識されない→クリックさせないという方法になります。

◆HTML

<a class="tel" href="tel:012-345-6789">

◆CSS

@media screen and (min-width: 768px) {
    .tel {
        pointer-events: none;
        cursor: default;
    }
}

768px以上のデバイスでは、電話番号のリンクのポインター（カーソル）を無くすコードです。

方法2.jsの端末判定&CSSで対応

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:を有効に、それ以外は無効にするという方法です。

これだけでは、PC時のリンクカーソルが指カーソルのままになってしまうので、CSSで下記を追記します。

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

まとめ

従来私が組んでいたようなCSSで表示・非表示で記述するやり方よりも上記2つの方法の方が一つのa要素で実装できるので効率的だなと感じました。

どの業種のWEBサイトにも電話番号は基本的に記載されていますし、使用頻度も高いので備忘録として残しておきたいと思います！

もし他にも簡単なやり方があればぜひ教えてください！