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.

Answer 3

I am using the below CSS with Media Queries to reach this.

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        cursor:default;
    }
}

It is based on this question

Answer 4

I had the same problem and started using the meta tag for format detection:

<meta name="format-detection" content="telephone=no" />

per this discussion with the same problem: Disable telephone number detection on iPad desktop web links?