SPのみ電話リンクを有効にする方法

電話のリンクはPCでは必要なので無効にしたい・・・ってことがありますよね。
今回は、ユーザーエージェントで切り替える方法とCSSで切り替える方法を紹介します。

SPのみ電話リンクを有効にする方法

ユーザーエージェントで電話リンクを切り替える

Javascriptを使用してユーザーエージェントを取り、AndroidかiPhoneでアクセスされた時のみ電話リンクを有効にします。

let device = navigator.userAgent;
if (device.indexOf("iPhone") === -1 && device.indexOf("Android") === -1) {
  jQuery('a[href^="tel:"]')
    .css("cursor", "default")
    .on("click", function(e) {
      e.preventDefault();
    });
}

Android、iPhone以外の端末でアクセスした場合は、リンクを無効にしてくれます。

CSSで電話リンクを切り替える

こちらの方法では、横幅によってリンクを切り替えるだけなので完全にリンクを無効にすることはできません。
端末によって切り替えたい場合は上記のユーザーエージェントを使用する方法を使用してください。

@media screen and (min-width: 640px) {
a[href^="tel:"] {
    pointer-events: none;
}
}

これで、横幅が６４０pxを超えた時に電話リンクを無効にすることができます。
メディアクエリの値を変えることでタイミングは調節可能です。