Is there a way to tell if an end user will be able to handle 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; }

Answer 2

Just a thought, but if you enter the below header information

<meta name="format-detection" content="telephone=yes">

You will be able to enter phone numbers without the tel: prefix (or even an anchor) and the browser will auto-convert them to clickable phone links.

I think this may be more reliable than feature or agent detection.

Answer 3

I know I'm coming along almost 10 years later, but I looked into this issue for tailoring the UI in one of my web apps and ultimately the answer that I settled on was a toggle option on the main user menu:

✔ This device is a phone

When the user toggles this setting on or off, the result is stored in the browser's window.localStorage, so that it can be remembered for later sessions.

The exact wording will depend on your application and why you need to know, but at the end of the day the user knows if their device has the ability to make calls, whereas without asking them, the best we can do is guess.

Answer 4

As far as I can tell there doesn't seem to be a good reliable way of doing this. It depends on what software is installed besides the browser and as such I don't think it would be exposed to a webpage (otherwise you can use it to check if the user has certain software installed, especially with application specific links like itunes or visual studio).

EDIT: As pointed out in the comments firefox does try to navigate and will instead show an error page show the below solution won't work for firefox.

An alternative to this is to simply handle someone clicking on it and it not working decently. Testing with chrome it seems the browser simply does nothing if the protocol is not recognized so you could just add an onclick that takes the part after tel: and transform click to call into the actual number. So clicking on it shows the number if they don't have anything installed which is perhaps a decent compromise?

Answer 5

As far as I know detecting what capabilities / applications a user has can be tricky for security reasons, but you can rule some things out and go from there.

You could try see of its a mobile browser which can handle the link, and then if not, see if the other device is capable of using a telephone number, e.g. Skype, and again if not, just display a normal number.

this combines answers from these questions a href tel and standard browsers and Javascript to detect Skype?

<div>
<?php if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'android')) { echo '<div id="tel"><a href="tel:123456">123456</a></div>'; }else{?>
    <script>
            function skype (failureFunction) {
                var $ = jQuery;

                if ($.browser.safari || $.browser.opera) {
                    return true;
                } else if ($.browser.msie) {
                    try {
                        if (new ActiveXObject("Skype.Detection")) return true;
                    } catch(e) { }
                } else {
                    if (typeof(navigator.mimeTypes["application/x-skype"]) == "object") {
                        return true;
                    }
                }
                $('a[href^="skype:"]').click(function() {
                    failureFunction();
                    return false;
                });
                return false;
            }

        jQuery(function($) {
            if (skype()) {
                $('div#tel').html("<a href='skype:123456'>123456</a>");
            } else {    
                $('div#tel').html("<p>123456</p>");
            };
        });
    </script>
    <div id="tel"></div>
    <?}?>

I hope its a step in the right direction for yer

Answer 6

A client side implementation could be realised using the BrowserDetect script and filter the user's browser properties with this list: Can i use: URI

var browser = BrowserDetect.browser;
var browserVersion = parseInt(BrowserDetect.version);
var supportsURI = true;

if((browser == 'Firefox' && browserVersion < 2) || (browser == 'Explorer' && browserVersion < 8) || (...)) {
    supportsURI = false;
}

(not tested)

If the browser doesn't support URI-Schemes you can trigger the link and show a lightbox containing the required data (e.g. the phone number).