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:[phone]">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.

Solution 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>

Solution 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:[phone]">[phone]</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.

Solution 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

Comments

[josh3736]

This approach would also disable phone number detection on phones, which we don't want in this case.

[Dom]

This is a good answer, with some great food for thought, upvoted, will accept an answer once I have researched some more and made a decision. Thanks for input.

[tmsimont]

Putting links all over your page that link to error pages on unsupported devices seems like bad UX design. This is why you'd want to hide call links on unsupported devices.

[Dom]

If I had more rep I'd add a bounty to reward this answer. I'm very glad you shared this information with me.

[SunSparc]

Microdata is a good answer. I was considering a webserver rewrite to catch tel:######### requests and send them to a contact page. But if the user-agents can handle Microdata, that is even better.

[Toby Speight]

Linking the number is recommended by RFC 3966, too - and is essential on hard-copy printouts (arguably an extreme case of something that doesn't support following tel: URLs).

[toad]

Great call! Also, if you happen to care about the presentation of the phone number on your website, you can format the number as follows: [phone] (with or without hyphens/parentheses).

[user151496]

if i add microdata without the <a href="tel:...">, the mobiles won't be able to click it still