'Switching' a Tel: link on and off... Preferably CSS only

Question

I have read in a few other posts that creating a tappable link for a phone number can be done with tel: in an anchor tag

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

<a href="tel://1-555-555-5555">Call Us! <span>(555) 555-5555</span></a>

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

The idea is that on a desktop you will only see "Call Us! (555) 555-5555", but not be an actual link

But when we scale down to mobile, you will then see a stylized link that just says "Call Us!" that you can click.

I'm sure there is a way to accomplish this with JavaScript or JQuery... but is there anyway to accomplish this with CSS Media Queries?

Note: Visual styling is no problem.. just looking for a reasonable solution for the "switching" concept.

Thanks in advance!

Answer 1

I think your best bet would be to add an ID to your anchor tag and through your media query you can hide it on the desktop version there no need for the span.

Then for your non anchor text hide that when you are scaled down through another ID in a media query.

Answer 2

There really isn't anything wrong with leaving the link on desktop computers. This would for example allow you to click the link to call via Skype or other VOIP program you might have installed.

If you still want to change the link, just create two of them. One that is shown for desktops, the other for mobiles.

Answer 3

You could create 2 links, one to show on desktop and one for mobile

OR

Use css to style the anchor with phone number in them to default cursor so it does not look like a link even when you hover. To complement this, you need to use js to disable the click action.

This is all assuming you can detect what device you are on reliably.

Answer 4

<a href="tel:123456789" class="tel-link">TEL: 123-456-789</a>

---

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

This will display the phone number in plain black for the browsers over 600px wide ( so it doesn't look like a link ) even though it still has a link. I think it's ok because you can make a call from PC nowadays.