Question HTML/CSS question, I have a tel: link on my website

[mikeymikec]

I insist on doing my own website development for my business. Because I want my website to be down with the kids going around on their newfangled highfalutin' smartphone type gadgets, the website is a basic responsive design that includes a block div with my tel-linked phone number which at desktop resolutions sits in the top-right corner of the page, and shifts in a semi-agreeable fashion for more phone-type resolutions.

I'm thinking that the tel link is a little pointless on a non-smartphone device. Sure, it achieves the purpose of making my phone number easy to reach, but clicking on a tel link on a desktop predictably throws a browser prompt about how tel links should be handled, which likely confuses the technologically challenged.

The div and phone code:

 <div id="phone"><a class="phone" href="tel:myphonenumberhere">

Using only HTML+CSS, I'm just wondering if there's a way to make that link go to the contact page on my website when the page is viewed with desktop resolutions.

 

[Ken g6]

Sure, there's plenty of options. The usual way is to make two links. One is visible only for phones; the other is visible in all other cases.

Detecting a "phone" isn't perfect, but there are a few tricks you can use besides just width if you want to.

https://stackoverflow.com/questions/30064144/can-i-use-media-queries-to-detect-whether-a-device-can-make-phone-calls

If for some reason you can't have two links right next to each other, you can have an invisible link appear over the other one. But the usual way is better.