Can you detect whether a device has phone capabilities (e.g. it can make voice calls/SMS) with JavaScript?

Question

Is there any way to detect whether a mobile device is capable of making voice calls / SMS messages?

This is important when applying tel: and sms:<

Answer 1

A new plot twist in this problem (as of Feb 2015) is that many desktop browsers now support click-to-call, however they won't auto-detect phone numbers.

So the nifty tricks floating around for sniffing out phone number auto-detection or touch capability, are now obsolete.

Mac OSX since Yosemite 10.9.2 has supported click-to-call with Facetime audio, and Windows 8 / IE11 does the same using Skype. Not sure about Chrome OS (Hangouts?). iPads use Facetime audio calls.

It looks like all web browsers from now onwards will support click-to-call. The question is really about how to prevent older browsers and desktop OS users from getting an error when clicking a tel: link.

I made a Javascript library to attempt to detect older desktop OS users that are before tel: link support, but it proved very problematic and complicated.

Right now my approach is either:

• A) Leave it as a link for all users. Users without a call-capable browser will just have to suffer
• B) Use a media query to hide the link styling for only desktop browser widths, assuming that most desktop users aren't going to be making calls from their desktop PC anyhow.
• C) Skip the <a> tag and desktops altogether and let auto-detection do it's link magic on mobile devices

I'm not crazy about any of these solutions, but I'm opting for B until the browser support landscape changes in the future. That way I have control over the <a> tag, a desktop user can still click the phone # if they really want to, and I can swap easily in the future.

Answer 2

I havent seen an obvious way to see that sms: and tel: links get special treatment.

Update: @janogosteve below has confirmed there is currently no reliable feature detect. This looks undetectable.

---

Here's a comprehensive way to check this feature detect. (Read jangosteve comment below!)

• make a test page with two of those links and a regular http link
• grab the elements and then traverse all their properties, copy it all over to an object..
• also getComputedStyle info for a bunch of details on them and throw that into an object as well
• JSON.stringify( that stuff so you can deal with it later on)

Do the above on an iOS device and in desktop Safari/Chrome

Then JSON.parse them back into objects... and use https://github.com/NV/objectDiff.js to see if you can spot any differences at all.