Phone Number Auto-Detection On Mobile: Which Browsers Support Which Number Formats?

Since Apple released the iPhone, and perhaps before, mobile browsers have supported making phone numbers into tappable links. When a user taps on the phone number on a webpage, it will invoke the phone calling app, pre-populated with the phone number. The interesting thing about this behavior is it’s very inconsistent between mobile browsers from version to version.

I started investigating this after my bi-weekly meeting with our CEO, David Sauter. We were talking about updating some of our sites so that phone numbers would be actionable on mobile browsers. Before I began making this change, I wanted to see what the support was for various mobile browsers, specifically for different phone number formats.

I ran a test with the following phone number formats on 12 different mobile browsers using our testing lab at Envano. Below are the following phone number formats I tested out.

• 1-920-278-7711
• 1.920.278.7711
• 19202787711
• (1920) 278-7711
• 920-278-7711
• 920.278.7711
• 9202787711
• (920) 278-7711

It’s always been a pet-peeve of mine when sites use inconsistent phone number formats. There’s nothing inherently wrong with it, but it just looks sloppy to me. Dashes, dots, or none at all? Some will place the area code in parenthesis, some won’t. All of these different combinations make it harder for mobile browsers to parse out and to auto-detect numbers. Then there are international numbers, but I’ll skip that for this blog post.

The following phone number formats are more commonly supported by the mobile browsers I tested. However,  none of the number formats were compatible with Firefox, Android 5-8.0, iPhone iOS 12.1 Chrome, Chrome, Galaxy Tab S4 Samsung and Nexus 9 tablet.

• 1-920-278-7711
• 19202787711
• (1920) 278-7711
• 920-278-7711
• 920.278.7711
• 9202787711
• (920) 278-7711

However, this number format didn’t reach 100 percent support across browsers. Based on that, I would avoid using it and use one of the previous formats I listed above.

• 1.920.278.7711 – iPhone iOS 7 Safari, iPhone iOS 12.1 Safari, iPad Pro iOS 12.9 Safari and iPad 6th iOS 11 Safari did not support it.

Below are screenshots of my data showing how some browsers detect numbers while others don’t.

Styling Auto-Detected Phone Numbers with CSS

The other thing I tested was whether or not I can style the auto-detected phone numbers with CSS. The results varied greatly for this as well.

Below are screenshots of my data showing how some browsers style these as links while others do not. Others don’t allow them to be re-styled.

Can I use an anchor link wrapped around the phone number?

Yes! Of course, you could use the tel: protocol and manually make phone number links. The issue with doing it that way is that desktop users are going to see stylized anchors for phone numbers and this may cause confusion with them.

The next question you’re going to ask is, “Can’t I just disable the links for devices that don’t support phone calls?” I’m glad you asked, because actually you can’t. There is no method to detect whether a device can support phone calls. That simply isn’t exposed to the web browser. Also, how do you define a mobile browser with phone capabilities? Browsers that support touch? Windows 10 laptops support touch but can’t make phone calls. Most tablets are touch devices that can’t make phone calls. Maybe it’s based on the width of the screen, for example, all small screens can make phone calls. iPod touches can’t make phone calls and have small screens.

So your options are to disable auto-detection using a meta tag <meta name = “format-detection” content = “telephone=no”> where everyone loses or you can try to avoid desktop users from clicking on the links in the first place. This might best be achieved by manually using the tel: protocol and then adding styles to undo the automatic appearance of it looking like a link.

a[href^=”tel:”]

{

color: inherit;

cursor: pointer;

text-decoration: none;

}

Interested in learning more about how to optimize your website?  Let’s chat!