Knowledge Base

It’s all about the design of phone numbers on iPhone and iPad

Generally individuals use phone number on website as per the layout but, iPhones, iPads, and other mobile devices automatically detect phone numbers and add tap-to-call functionality. It’s a great feature for user experience, but the systems add their own styling to the numbers, i.e. usually they are blue and underlined. However, a blue underline may not match the design.

If you want to remove the tap-to-call functionality form iPhones, Ipads, and other mobile devices add this to the head of your html document.

However, I don’t recommend using it. Most businesses want to be contacted by their customers, using the code above makes it hard for customers to call from their phone.

The Phone no styling

We want the numbers look like a link so mobile users are more inclined to tap it and make that call. The best way to do this is to wrap the number in an anchor tag with the href as tel:thenumber. A bit like a mailto email link, like this:

<a href=”tel:+1-888-322-7617″>+1-888-322-7617</a>

If needed, to add CSS:

.tel,.tel:visited { /*for small screens */display:block; color:#fff; background-color:#000; padding:1em; text-decoration:none;}
.tel:hover,.tel:focus {color:#000; background-color:#fff; }
@media screen and (min-width: 28.5em) { /* for larger screens */
.tel,.tel:visited {background:none; cursor:default; }
.tel,.tel:focus { color:#000;}
}
The above will make a simple looking button on small screens, and just text on larger screens. The curser state is defined as default, which is the regular arrow. This is so not to confuse desktopers when they rollover a link that goes no-where.