電話番号リンクをPCでクリックさせない

CSS jQuery
CSS jQuery
Yasuko
yasuko
寒くて体のあちこちが痛いです

サイトに電話番号を記載しているけれど、PCの時にはクリックさせたくない。

そういう要望は多いと思います。

安心してください。できますよ。

//電話リンクをPCで無効にする
$(function () {
  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();
    });
  }
});

電話番号リンクをモバイル以外では無効にする記述です。

PCの時には text-decoration: none;

SPの時には text-decoration: underline;

のcssを書けば完璧です。