PCの時のみ電話番号の発信を無効にする方法

[Kite]

初めまして。

Shopify partnerのkiteと申します。

現在、テーマ「Focal」を利用してサイト構築を行なっております。

商品詳細ページに発信可能な電話番号を記載したいのですが、PCのときは電話を使用しないと思いますので、クリックしても発信できないようにしたいのですが可能でしょうか。

コードの知識が少ないのですが、ご教授いただけますと幸いです。

現在こちらのコードをカスタムHTMLのブロックに記載していますが、上手く反映されない状況です。

(電話番号部分は投稿用に000-000-000に変更しています）

<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>

<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>

[Qcoltd · Accepted solution]

こちらの記事を参考に、回答しております。

https://illbenet.jp/view/css-pointer-events

<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>

こちらを、下記のようにされてはいかがでしょうか？

<h4 style="text-align:center">
<a href="tel:000-000-000">000-000-000</a>
</h4>

<style>
@media (min-width: 750px) {
   a[href^="tel:"] {
       pointer-events: none;
   }
}
</sytle>

750px以上をPCとしましたが、

@media (min-width: 750px)

の数値をご変更いただくことで、

ご希望の数値以上をPC扱いとすることができます。

User-Agentで制御するより、緩い判定になりますので、

ご要望に沿わないようでしたら申し訳ございません。

もし、JSでの実装をご希望でしたら、

jQueryが存在しないためにエラーが出ている可能性がありますので、

下記のようにスクリプトを変えますと、うまくいくかもしれません。

<script>
var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

if (!isMobile) {
  const telLinks = document.querySelectorAll('a[href^="tel:"]');
  telLinks.forEach(telLink => {
    telLink.addEventListener('click', function(e) {
      e.preventDefault();
    });
  });
}
</script>

ご参考まで。

(キュー田辺)

[Kite]

株式会社Q 田辺様

ご返信いただきありがとうございます。

ご教示いただいたスクリプト部分を変更するとうまく反映することができました！

他の方法や参考URLまで本当にありがとうございました、、！