23

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", "#");
}
6
  • 3
  • @Zenith that question is relevant but it contains no discussion of how one would detect when including tel: links will work.
    – Pointy
    Jun 27, 2013 at 14:05
  • @Zenith thank you, this is helpful, but as Pointy mentioned it does not in fact detect specifically whether tel:// is supported. That is what I am trying to achieve - the user agent testing, I've got handled... just wondering/hoping for something that more accurately describes whether the device can handle tel://. Jun 27, 2013 at 14:20
  • @SetSailMedia Sorry, I meant to say take a look at the sidebar too (I didn't vote to close btw). Check out the comments on this question - stackoverflow.com/questions/16810356/…
    – dsgriffin
    Jun 27, 2013 at 14:23
  • This question is also relevant: stackoverflow.com/questions/2872090/… , it contains how to check if certain browsers support a protocol Jun 27, 2013 at 14:51

4 Answers 4

13
+50

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.

5
  • Android seems to assume that a series of numbers is a telephone number and tries to call it when clicked on
    – Jez D
    Jul 30, 2013 at 9:56
  • 3
    I know I'm horribly late, but I found this article which discusses which formats are recognized by which types of phones. You'll want to pick a format for your hidden <div> number that both Android and iPhone can recognize, otherwise your work will be in vain!
    – Meshaal
    May 11, 2014 at 6:53
  • This doesn't seem to work. Can anyone create a test page where this does work properly? Google Chrome on Android seems to ignore the <div> even if it is not hidden and even if there is a <meta name="format-detection" content="telephone=yes"> tag in the header.
    – Talia
    Feb 23, 2015 at 14:31
  • Clever hack. However, telephone format detection should always be off via meta tag if your page is explicitly creating tel: links. I find UserAgent detection to be more reliable and future proof across the gamut of browsers and devices. Feb 1, 2016 at 21:41
  • Skype or other similar software may be a handler of "tel:" protocol, so this way not so good. Often when Skype is installing it also installs some extensions for browsers, that converts ALMOST ALL number sequencies into "tel:" links.
    – SynCap
    Mar 18, 2017 at 19:27
2

One might be able to find the first instance of an href with tel:// in it and post an ajax call. If it was successful it should have a readyState of 1 so do nothing. On failure, find all hrefs with tel:// and grab inner html and replace the a tag.

This is more of a hypothesis and untested.

Another thought is most browser have custom support for phone number formatted strings, If you place in a phone number you shouldn't have to create the a tag as it should be done automatically.

3
  • OK interesting take on that to just leave out the tag. I was under the impression that even though it is added automatically, that it was best practice? And I will try your suggestion with ajax as well.
    – JGallardo
    Aug 2, 2013 at 20:33
  • It's nicer if you at least minimally test before writing an answer that thousands of people will spend time reading :upsidedown-smile: (yes, this comment will auto-destruct after you've read it, so save time for other people... :wink:)
    – Simon B.
    May 5, 2021 at 7:14
  • Since custom protocols can be registered based on a persons computer, I couldn't possible test every scenario. Someone could possible have registered tel:// on their computer in which case the ajax request would return a readyState of 1. However, upvoting does allow one to filter through possible answers to find the best solution. AS far testing the scenario, I have used this with other custom protocols (not tel://) on desktop/ tablet.
    – ctatro85
    May 12, 2021 at 14:57
2

I'm using the following to detect its PROBABLY a phone before enhancing a non link element that into a tel link:

var probablyPhone = (
    (/iphone|android|ie|blackberry|fennec/).test
     (navigator.userAgent.toLowerCase())
     && 'ontouchstart' in document.documentElement
  );

I exclude ipod|ipad because I know they are not phones

The key point here is PROBABLY It will of course return true an some tablet devices, but this enough for my purposes on a non phone touch device the link would just fail anyway - I mostly just want to exclude desktop hence the touch event detect. I suppose also checking device width would narrow it down too but ultimately there is no guaranteed way to detect a mobile device that is capable of phone calls that I've found.

3
  • Touch events may be emulated by software way, Android, blackberry can be tablet, TV, toy, radio etc.
    – SynCap
    Mar 18, 2017 at 19:10
  • 1
    yep but I did post that almost 4 years ago I would not advise to follow something 3 years old without looking for more recent solutions.
    – rgb
    Mar 20, 2017 at 7:22
  • :) My comment isn't answer to you, but for those people who reading this from today and ever. For that days - this solution was a perfect enough
    – SynCap
    Mar 20, 2017 at 10:48
1

Some limited solution can be a way to detect some pure phones. But not all possible:

(function(a) {
	window.isPhone = /\bi?Phone\b|(?=.*\bAndroid\b)(?=.*\bMobile\b)|(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i.test(a);
})(navigator.userAgent || navigator.vendor || window.opera);

console.info('This device %s make phone calls', window.isPhone ? 'is originally intended to' : 'probably can\'t' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.