Styling Mobile Telephone Number Links

Posted By: on April 15th, 2013
Filed Under: Web Dev

A styled mobile link on TopDraw.comWhile cross-browser testing, you’ll run across mobile devices automatically restyling telephone numbers as hyperlinks. How do you handle this?

You’d think this would be a no-brainer to figure out but I decided to use google-fu to double-check that I was handling the inserted link correctly. I was a bit surprised by what I found – advice on how to disable mobile device telephone links!

I’m not in favour of disabling functionality for the sake of a bit of styling. But, if that’s what you really want to do, then this is the bit of code many sources on the Internet will advise you to use:

<meta name="format-detection" content="telephone=no" />

Not satisfied with this solution, I wanted to take a peek at the source code of my page to see exactly how mobile devices changed my code. Guess what?

That basic functionality – viewing the source code of a page – is not native to Safari on an iPad or iPhone! Lucky for me somebody made a workaround: How to view source on an iPad or iPhone.

This method worked like a charm! The injected code wrapped my telephone number with an anchor tag and the ‘url’ was ‘tel:(555) 555-5555′.

<a href="tel:(555) 555-5555">(555) 555-5555</a>

From there, it was a simple matter of targeting and re-styling the anchor tag to look consistent with the design.

For those unfamiliar, you can target the link either through its parent elements or by using:

a[href^="tel:"] { }

instead of:

a { }

However, further investigation revealed there are different patterns of phone number that will translate differently depending on your mobile device OS. This site has a good list of the patterns used to make default phone links. It also shows which OS will ‘magically’ create links out of the phone number text.

Next time you run across a telephone link where you didn’t put one, you’ll know how to handle it!

Find us on Google+

Tammy Lee
Tammy is a Senior Web Developer with TopDraw Inc. Her interests include Legend of Zelda, comics, Heroes (shush! It was an awesome show!), painting mer-bears (a little-known majestic Canadian creature) and stalking food trucks on twitter.