Michael McClure

How To Click Phone Numbers on Responsive Websites Using Chrome for iPhone

The Problem:
Chrome Browser on iPhone Does Not Auto-Detect Phone Numbers for Responsive Websites.

I recently finished up designing a responsive website for Superior Landscape Management. After launch, it came to my attention that all the phone numbers on the site were not clickable on an iPhone while using the Chrome browser. Now, I realize that Chrome users on an iPhone make up a very, very small percentage of site traffic. However, the issue at hand just seems ridiculous. Although I could easily display the phone number wrapped inside of an anchor tag like this <a href="tel:555-555-5555">555-555-5555</a> the phone numbers would then be live links on desktop sites (something I'd rather not see).

The Solution:
Use Modernizr and jQuery to Create Links for Phone Numbers

To get around this problem as seen when using Chrome on an iPhone, I created a simple jQuery function to wrap the phone number with href="tel:", but only on touch devices. That's where Modernizr comes in to play. With Modernizr, you can check to see if a device is touch friendly. If so, Modernizr automatically adds a class to the html tag of "touch". It will looks like this <html class="touch">.

The Demo

Remember: On most mobile browsers, the phone number below will automatically be detected as a phone number and will then become a link. For Chrome on iPhone, however, it doesn't. Open this page up in Chrome on an iPhone and see the phone number below become a link.

Call 555-555-5555 today.

The Code:
Modernizr + jQuery

If your website is using Modernizr already, then you're half way there. If not, download Modernizr. Make sure your version is detecting for touch events. You can do this by selecting the checkbox "Touch Events" under the "Misc." heading. In essence, you going to use Modernizr to detect whether your device is touch friendly. If it is, Modernizr adds a class to your <html> tag called "touch". With that, we can now use the following html and jQuery to do the rest.

<p>Call <span class="make-tel-link">555-555-5555</span> today.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		// if Modernizr detects class "touch"
		if($('html').hasClass('touch')) {
			// for each element with class "make-tel-link"
			$(".make-tel-link").each(function () {
				var jPhoneNumber = $(this).text();
				// wrap phone with href="tel:" and then insert phone number
				$(this).wrapInner('<a class="jPhoneLink" href=""></a>');
				$('.jPhoneLink').attr('href', 'tel:'+jPhoneNumber);
			});
		}	
	});
</script>

 

Find This Helpful? Spread the Word!