Cording

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

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

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

1.CSS3のpointer-eventsプロパティ

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

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

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

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

tel:00-0000-0000

2.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; }
Screenshotリンクをスマートフォン端末以外では無効にする

Js版のコード参考にさせて頂きました

URL
TBURL

Leave Comments

*
*
* (公開されません)

※日本語が含まれない投稿は送信できませんので、ご了承くださいませ。

Category List

Return Top