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 just ignores the link but firefox and internet explorer redirect to an error page.
HTML:
<a href="tel:+491796737741" class="contact-info" ></a>
CSS:
#header .contact-info { width: 293px; height: 133px; display: block; float: right; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; margin-right: 20px; margin-top: 110px; }
How can I fix this?
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.
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.
