Use jQuery to detect whether a device can make telephone calls (supports "tel://" protocol)

browser-detection, detection, javascript, jquery, mobile

Solution

I'm not sure about Android or BlackBerry, but iOS will automatically pick up telephone numbers and wrap them like so: `<a href="tel:xxx">xxx</a>`...so you could have a hidden `<div>` somewhere that contains a phone number like 1-800-555-5555, then, on page load do something like this:

var isTelephone = $("a[href*='tel:']").length > 0;

This may or may not be portable to other platforms, you'll have to try it out.

Problem

In my website, I have several links like so: `<a href="tel://+12181112222" class="call">218.111.2222</a>` I want to use jQuery (or other method) to determine whether the device supports making calls / using the tel:// protocol. Does such a method exist in the world? I want to use some method for enabling or disabling the links, because when clicked on desktop we come to a page like "Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program." Currently, I am sniffing the user agent and detecting if it is a mobile device. But, is there a better/accurate way? Something like jQuery's `$.support.xx`? ``` if ( (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent) != true ){ $(".call").attr("href", "#"); } ```

Original source

Related problems