How can I make an 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.

score 42 · Accepted Answer · answered Nov 16 '12 at 01:31

42

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>

answered Nov 16 '12 at 01:31

John Conde

217,595
99
455
496

1

If I had more rep I'd add a bounty to reward this answer. I'm very glad you shared this information with me. – Dom Mar 09 '15 at 01:03
1

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. – SunSparc Apr 23 '15 at 20:58
1

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: (123) 555-5555 (with or without hyphens/parentheses). – toad Feb 14 '16 at 18:14
if i add microdata without the ``, the mobiles won't be able to click it still – user151496 Apr 28 '21 at 10:33

score 14 · Answer 2 · answered Nov 16 '12 at 01:48

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.

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. — Dom, Nov 16 '12 at 01:59
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. — tmsimont, Mar 13 '14 at 15:18
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). — Toby Speight, Aug 07 '15 at 09:49

Marcio Mazzucato · Answer 3 · 2017-05-31T21:07:50.330

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

edited May 31 '17 at 21:07

answered May 31 '17 at 20:36

Marcio Mazzucato

8,841
9
64
79

score 0 · Answer 4 · edited May 23 '17 at 10:31

0

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?

edited May 23 '17 at 10:31

Community

1
1

answered Nov 16 '12 at 01:42

SergeantHacker

157
13

5

This approach would also disable phone number detection on phones, which we don't want in this case. – josh3736 Nov 16 '12 at 01:49

How can I make an only active on mobile devices?

4 Answers4

Linked