Styling Mobile Telephone Number Links

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:

[code language=”html”]
<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’.

[code language=”html”]
<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:

[code language=”css”]
a[href^="tel:"] { }

instead of:

[code language=”css”]
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!

Contact Us

Leave a Reply

Your email address will not be published. Required fields are marked *