電話番号のタップ可能なリンクをtel:アンカータグで作成できるという他のいくつかの投稿を読みました
これをレスポンシブ Web サイトに実装したいと思います。次のようなものです。
<a href="tel://1-555-555-5555">Call Us! <span>(555) 555-5555</span></a>
(CSS で phone# を非表示にするために使用する予定の span タグ)
デスクトップでは「Call Us! (555) 555-5555」のみが表示され、実際のリンクではありません。
しかし、モバイルに縮小すると、「お電話ください!」とだけ書かれた様式化されたリンクが表示されます。クリックできます。
JavaScriptまたはJQueryでこれを達成する方法があると確信しています...しかし、CSSメディアクエリでこれを達成する方法はありますか?
注: 視覚的なスタイリングは問題ありません。「切り替え」の概念に対する合理的な解決策を探しているだけです。
前もって感謝します！
デスクトップ コンピュータにリンクを残しておくことは、実際には何の問題もありません。これにより、たとえば、リンクをクリックして、Skype またはインストール済みのその他の VOIP プログラムを介して電話をかけることができます。
それでもリンクを変更したい場合は、2 つ作成してください。1 つはデスクトップ用、もう 1 つはモバイル用です。
デスクトップに表示するリンクとモバイルに表示するリンクの 2 つを作成できます。
また
css を使用して、電話番号を含むアンカーをデフォルトのカーソルにスタイル設定し、ホバーしてもリンクのように見えないようにします。これを補完するには、js を使用してクリック アクションを無効にする必要があります。
これはすべて、使用しているデバイスを確実に検出できることを前提としています。
最善の策は、アンカー タグに ID を追加することであり、メディア クエリを使用してデスクトップ バージョンでそれを非表示にすることができ、スパンは必要ありません。
次に、非アンカー テキストについては、メディア クエリで別の ID を介して縮小されたときにそれを非表示にします。