How to disable link to phone number when on Desktop?

Question

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

Answer 1

My approach is similar to another approach above; there are a few considerations I take into account:

• As we know, there is no good programmatic way to detect support. This is a rare case where we are forced to parse the UserAgent string.
• This should be client side; there is no need for server side detection.
• There are now desktop browsers that can handle tel: links; Chrome's behavior on the desktop is, at worst, to do nothing when clicked. At best, you can make a call with Google Voice.
• Because doing nothing when clicked is Chrome's fallback behavior, we should use that behavior as a fallback on all browsers.
• If your page takes responsibility for creating tel: links, it should take responsibility for all tel: links and disable autodetection in the browser.

With all of this in mind, I suggest first adding a meta tag to your :

Then, define a JavaScript function that parses the UserAgent and returns true if and only if we think the browser will not bring us to an error page when the link is clicked:

function hasTelSupport()
{
    return /Chrome\/|Mobile( Safari)?\/|Opera M(in|ob)i\/|w(eb)?OSBrowser\/|Mobile\;|Tablet\;/.test(navigator.userAgent);
}

Then, call that function from the onclick attribute in your link:

Call Me

This will allow tel: links to be clicked on Chrome, Edge, iOS Safari, Android Browser, Blackberry, Dorothy, Firefox Mobile, IE Mobile, Opera Mini, Opera Mobile, and webOS. The links will do nothing when clicked on other devices or browsers.

Please use international format for your tel: links. In other words, the first characters should be a + and a country code.