"Switching" the link "Tel: link to ...". Only CSS is preferred.

Question

I read in several other posts that creating a linked link for a phone number can be done using tel: in the anchor tag

I would like to implement this on a responsive website .. something like this:

<a href="tel://1-555-555-5555">Call Us! <span>[phone]</span></a>

(the span tag that I plan to use to hide the phone # using CSS)

The idea is that on the desktop you will see only "Call Us! [phone]", but not the actual link

But when we zoom out to mobile, you'll see a stylized link that simply says “Call us!”. what you can click.

I'm sure there is a way to do this using JavaScript or JQuery ... but still, to accomplish this using CSS Media queries?

Note: visual style is not a problem. just looking for a reasonable solution for the concept of "switching".

Thanks in advance!

Answer 1

I think it’s best to add an ID to your anchor tag, and through your media query you can hide it on the desktop version, there is no need for a span.

Then, for your non-anchor text, hide this when you reduce the other identifier in the media request.

Answer 2

There is nothing wrong with leaving a link on desktop computers. This, for example, allows you to click the link to call via Skype or another VOIP program that you may have installed.

If you still want to change the link, just create two of them. One that is shown for desktop computers, another for mobile phones.

Answer 3

You can create 2 links, one for display on the desktop and one for mobile devices

OR

Use css to bind the anchor with the phone number in it to the default cursor so that it does not look like a link even when you hover over. In addition to this, you need to use js to disable the click action.

All of this assumes that you can reliably determine which device you are on.

Answer 4

 <a href="tel:[phone]" class="tel-link">TEL: [phone]</a> 

---

 @media screen and (min-width: 600px) { .tel-link { color: #000 !important; text-decoration: none !important; } } 

This will display the phone number in black and white for browsers that are wider than 600 pixels wide (so this doesn't look like a link), although it still has a link. I think this is normal, because you can call from a PC these days.