商品詳細ページに電話番号を記載する際、PC環境ではクリックしても発信できないようにしたいという質問。
現状の課題:
提案された解決策:
pointer-events: none を使用結果:
質問者は提案されたスクリプトを変更して実装し、うまく反映できたと報告。解決済み。
初めまして。
Shopify partnerのkiteと申します。
現在、テーマ「Focal」を利用してサイト構築を行なっております。
商品詳細ページに発信可能な電話番号を記載したいのですが、PCのときは電話を使用しないと思いますので、クリックしても発信できないようにしたいのですが可能でしょうか。
コードの知識が少ないのですが、ご教授いただけますと幸いです。
現在こちらのコードをカスタムHTMLのブロックに記載していますが、上手く反映されない状況です。
(電話番号部分は投稿用に000-000-000に変更しています）
こちらの記事を参考に、回答しております。
https://illbenet.jp/view/css-pointer-events
####
000-000-000
こちらを、下記のようにされてはいかがでしょうか？
####
000-000-000
750px以上をPCとしましたが、
@media (min-width: 750px)
の数値をご変更いただくことで、
ご希望の数値以上をPC扱いとすることができます。
User-Agentで制御するより、緩い判定になりますので、
ご要望に沿わないようでしたら申し訳ございません。
もし、JSでの実装をご希望でしたら、
jQueryが存在しないためにエラーが出ている可能性がありますので、
下記のようにスクリプトを変えますと、うまくいくかもしれません。
```javascript
ご参考まで。
(キュー田辺)
株式会社Q 田辺様
ご返信いただきありがとうございます。
ご教示いただいたスクリプト部分を変更するとうまく反映することができました！
他の方法や参考URLまで本当にありがとうございました、、！