Is there a way to tell if an end user will be able to handle <a href="tel:###"> links?

Question

So if you want to link to a phone number you would do something like

<a href="tel:18005555555">Click to Call</a>

This is used commonly on mobile websites and is gaining traction on desktop sites as well (largely thanks to Skype I think.) However some computers/devices aren't able to support it. Is there a way to tell if a user is able to handle tel: links?

Solution can be either server side or client side but I would imagine it would need to be client side.

Answer 1

DeviceAtlas and Wurfl can get you some of this information, but as many have pointed out, there’s really no truly reliable way to detect a device’s ability to make a call. After all, someone might be on desktop, but capable of making a call from it based on the software they have installed (or even their OS capabilities).

In the interest of providing the best experience, you should include tel: links. That will give everyone the opportunity to dial the number if they can handle it. You could use CSS to make it look less link-like to reduce potential confusion for non tel: supporting browsers/OSes. Users who want to call the number will select it or touch it anyway (in hopes of copying the number) and will either activate the link (in touch scenarios) or see the hand (in mousing scenarios), helping them more quickly achieve their goal.

As a bit of an aside, setting white-space: nowrap on tel: links is always a good idea too :-) That will keep numbers on a single line so the hyphens don’t allow it to break.

a[href^=tel:] { white-space: nowrap; }