Under the hood what’s actually happening is Apple devices are dynamically turning the phone numbers into links so that the user can click on them and initiate a phone call.

If you have a bright design with a white background it’s not so bad.  The problem is that the link ‘s default color is blue and is almost completely unreadable on sites with dark backgrounds.  The worst part is it makes us look bad and not Apple.

So here are 2 ways to fix it.

1. The Meta Tag Option

First step is to add the following meta tag. This will stop all recent Apple devices from turning the phone number into a link.

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

The problem with this is that if you like the idea that people can click your phone number and the device will initiate a phone call to you then this solution will totally ruin your day.  Which brings us to option 2.

2. The CSS Option

This option is the one we went with so that we could keep the native functionality of iOS without having it mess with our styles. Basically, iOS adds the text “tel” to the href value. Their phone number links are coded something like this:

<a href="tel:4165168844">416 516-8844</a>

Knowing that we simply target links with the “tel” in the href and, presto, we can style as we wish. The CSS would look something like this:

a[href^=tel] {
    color: inherit;
    text-decoration: none;
}

That’s it. Now you can keep you site looking spiffy while also keeping Apple happy. A win-win if you ask me.

Dillon makes coding cool. Up to date on all the latest goings on in the industry, he keeps us all on our toes.