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