How can I make an <a href> only active on mobile devices?

Question

I want to add this code to make the contact details on my website automatically jump into a mobile dialpad/address book when clicked:

<a href="tel:12345555555">Call Us Now</a>

How can I make it appear as plain text for non-telephone devices (computers, tablets, laptops) so that it doesn't return a 404 error and cannot be clicked?

Happy to use any combination of HTML/CSS/JS to achieve this.

Answer 1

Don't use a hyperlink. Use microdata. Mobile phones will recognize that it is a phone number and allow it to be clicked but it won't affect normal web browsers.

<div class="vcard">
    <div class="tel">
        12345555555
    </div>
</div>

Answer 2

This might not directly answer the question, but I'd challenge your assumption that you need to hide call links on other devices.

Why?

• Non-phone devices can still make calls. For example, a PC with a VoIP client can handle tel: links.
• Tablets (iPad and Android) handle tel: links by allowing the user to add the number to their contacts, which would undoubtedly be synced to their phone – a nice convenience for your users.
• Relying on automatic format detection is a hack.

So just leave it as a regular link. Maybe make it obvious by linking the phone number, so that someone on a desktop with no telephony software will understand that nothing will happen when they click it.

Call Us Now at <a href="tel:12345555555">(234) 555-5555</a>

Also, remember that a tel: link won't result in a 404 error since a HTTP request is never generated. On my machine with no tel: handler, Chrome simply does nothing, IE9 says "Some content or files on this webpage require a program that you don't have installed." (reasonable), and Firefox says "Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program." (also reasonable).

When I was faced with this problem, I decided that the benefits of just leaving in tel: links outweighed any downsides or messy alternatives.