Clickable Phone Numbers for Mobile Browsers

Posted: 07/10/13

Mobiles Aren't Always Smart Enough to Spot Phone Numbers

I had a client wanting to make the phone number on his website into a link that worked on mobile browsers. Most mobile browsers will spot a string of numbers and dial it when touched. However, if the numbers have brackets and/or spaces to make them more friendly to us humans, the phone can struggle. Cue the tel: link:

<a href="tel:0800537693">

This was easy enough to add in, but it's not so friendly for desktop browsers, which loose the plot when confronted with what they think is an unknown protocol. The obvious thing is to try and hide the links when the pages are viewed on a mobile browser.

After a little research, I came up with this jQuery snippet combined with Concrete5's built in mobile detection library, which I added to the end of the site theme's elements/footer.php:

<?php
//remove mobile links if we're a desktop
Loader::library('3rdparty/mobile_detect');
$md = new Mobile_Detect();
if (! $md->isMobile()) { ?>
        $("a[href^='tel']").attr('href','#').css('pointer-events','none').css('text-decoration','none');
<?php } ?>