“tel:” URLs lead to error page on non-mobile browsers

Question

On this site, I have a link to a phone number for mobile devices in the top right corner where the mobile number is displayed. On desktops, when clicking on this link Chrome jus

Answer 1

Trying to fix this is a bad idea since PCs are capable of adding handlers for tel links. For example, on my PC, Skype is set up to handle those links.

Answer 2

This german-language blog shows a neat workaround that'll work with CSS3-capable browsers. First, you make your tel: links look like normal text by default:

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration:    none;
    color: #000;
}

Then, you give them link-like styling, but on mobile devices only:

@media only screen and (max-device-width: 480px) {
  a[href^="tel"]:link,
  a[href^="tel"]:visited,
  a[href^="tel"]:hover {
      text-decoration:    underline;
      color: blue;
   }
}

This has several caveats:

• It won't work with ancient desktop browsers (IE7 and such) - you'd have to give each tel: link a specific class for this to work with all browsers (instead of relying on the CSS3 href^="tel" bit)

• It won't remove the link behaviour, just hide it a bit. Of course, you can easily completely hide tel: links as well, by setting display: none by default and display: inline on mobile devices

• It will show tel: links on any mobile device, regardless whether they're capable of handling the phone number or not.