スマホのときだけ電話番号をリンクにしたいときのCSS小技

執筆者:

カテゴリ:

電話番号をタップしたら電話できるようになる

<a href="tel:0000000000">0000000000</a>

これですが、そのままだとPCでもクリックできちゃう。

実はSkypeとか入れてたら普通に電話できるから別にクリックできてもいいんだけど、あんまりスタンダードではないので、基本はクリックできないほうがいい。

そんなとき便利なのが、

pointer-events: none;

というプロパティ。これはクリックイベントを無効化にするという奇跡のプロパティで、これを知っていると役に立つ場面が多々ある。

というわけで、スマホ以外では電話番号はタップしても何も起こらないようにしてやればいい。

@media screen and (min-width: 751px){
  .telLink {
    pointer-events: none;
  }
}

<a href="tel:0000000000" class="telLink">0000000000</a>

telLinkというclass名つけるだけでいけるので、再利用性抜群です。

メディアクエリじゃなくてちゃんとデバイスで判別したい！という場合はjQueryを使いましょう

.is-eventNone {
  pointer-events: none;
}

$(function(){
  if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
    $('.telLink').addClass('is-eventNone');
  }
});

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

コメント