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

问题

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\", \"#\");
}

回答1:

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.

回答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:

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.

回答4:

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' );

来源：https://stackoverflow.com/questions/17345177/use-jquery-to-detect-whether-a-device-can-make-telephone-calls-supports-tel