the best way to list a phone number for click-to-call on website

Question

On a responsive webpage I've built (based on the twitter-bootstrap) I have a number of elements that are not visible unless the page is viewed on smaller resolutions (ie. tablets and phones).

I've found - at least with an iPhone running OS7 - that phone numbers are best left as numbers without a link. The iPhone detects the number format as a phone number, adds it's own a href and when you press the number it asks you if you'd like to call it - see screenshot 1.

But if I enclose my text or phone number in an a href with the tel: markup (as advised by numerous "experts"), when I click the link, nothing happens. I have to long press the link (hold it down for longer than a second) and only then does it give me the different options for a phone number - see screenshot 2.

Can this be overcome? Or is there a better way to list phone numbers so that mobile devices can click to call them (in the least number of steps for the end-user)?

Thanks

EDIT: After some further on page testing, I've found that the <a href="tel:xxxxxxxx">call link</a> is working OK - except for when it's in the navigation menu my page is using. The site switches to a drop-down style menu when it goes mobile and it is at the top of this unordered list that I have placed my call link. eg.

<nav>
     <ul>
         <li class="mobile-only"><a href="tel:1800251800">Call now on <i class="icon-phone"></i> 1800 25 1800</a></li>
         <li><a href="#section-home" class="active">Home</a></li>
         <li><a href="#our-team">Team</a></li>
         <li><a href="#our-services">Services</a></li>
         <li><a href="#contact-section">Contact</a></li>
     </ul>
</nav>

I have display:none; set for .mobile-only in my stylesheet, and when @media (max-width:768px) is reached, I have display:block; set for .mobile-only (amongst other styles).

So I think something in the nav bar or the code used to switch the nav bar between normal and mobile modes is stopping my call link from working properly.

Any thoughts?

Answer 1

The tel: scheme was used in the late 1990s and documented in early 2000 with RFC 2806 (which was obsoleted by the more-thorough RFC 3966 in 2004) and continues to be improved. Supporting tel: on the iPhone was not an arbitrary decision.

I'd suggest just start including properly-formed tel: URIs on your pages (without sniffing the user agent) and wait for the rest of the world's phones to catch up.

Or if you want to remove tel: for iphones you can use this jQuery snippet:

 //if iPhone
 jQuery('body').on('click', 'a[href^="tel:"]', function() {
         jQuery(this).attr('href', 
             jQuery(this).attr('href').replace(/^tel:/, ''));
 });