Search code examples
webtel

How to disable link to phone number when on Desktop?


How can I add a phone number to a website that is clickable but hides the link when I'm browsing on a website that doesn't support touch.

I could use Modernizr to set it up although. I don't know how.

<a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>

Solution

  • I was just dealing with this issue, looking up solutions, and I found this thread (and a few others). I have to confess that I couldn't get any of them to work properly. I'm sure I was doing something wrong, BUT I did figure out a cheat.

    As others have pointed out, changing the CSS to hide the visible link indication (color, text-decoration, cursor) is the first and easiest step. The cheat is to define a title for the tel link.

    <p>Just call us at <a class="cssclassname" href="tel:18005555555" 
    title="CLICK TO DIAL - Mobile Only">(800) 555-5555</a>.</p>
    

    By doing this, not only is the visible indicator of a link disguised (via CSS - see examples from others), but if someone does hover over the link, the title will pop up and say "CLICK TO DIAL - Mobile Only". That way, not only is there a better user experience, but your client doesn't accuse you of having a broken link!