The best way to specify a phone number to call the site

Question

On a sensitive webpage that I built (based on twitter-bootstrap), I have several elements that are not visible if the page cannot be viewed at lower resolutions (for example, tablets and phones).

I found - at least with an iPhone running OS7 - that phone numbers are best left as numbers without a link. IPhone defines the format of the number as the phone number, adds its own href, and when you click on the number that it asks for if you want to call it - see screenshot 1 .

But if I attach my text or phone number in href using tel: markup (as numerous “experts” advise), when I click on the link, nothing happens. I have to click on the link for a long time (hold it longer than a second), and only after that it gives me different options for the 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 them to call them (the least number of steps for the end user)?

thanks

EDIT: After some additional testing of the page, I found that the <a href="tel:xxxxxxxx">call link</a> working fine - except when it is in the navigation menu that my page uses. The site switches to the drop-down menu of styles when it goes to mobile, and it is at the top of this unordered list that I put in my link. eg.

 <nav> <ul> <li class="mobile-only"><a href="tel:[phone]">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 to .mobile-only in my stylesheet, and when @media (max-width:768px) , I have display:block; for .mobile-only (among other styles).

So, I think that something in the navigation bar or the code used to switch the navigation bar between normal and mobile modes stops my connection link from working properly.

Any thoughts?

Answer 1

The tel: scheme tel: was used in the late 1990s and documented in early 2000 with RFC 2806 (which was overshadowed by more thorough RFC 3966 in 2004) and continues to improve . tel: support tel: iPhone was not an arbitrary solution.

I would advise just starting to include correctly formed tel: URIs on your pages (without sniffing the user agent) and wait until the other phones in the world get caught.

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:/, '')); });