Building Mobile Websites – Overwriting iPhones’ Automatic Phone Number Coloring

A white, rounded square logo with an abstract S-shaped design on a gradient blue and purple background.

When building out my last mobile website, I came across a common problem. The issue is that certain phones — such as the iPhone — are programmed in such a way that when they see a phone number, they automatically make it one color. Some phones allow you to specify which color you would like phone numbers to appear on websites.

A smartphone screen displays a law firm's website. The firm is Colombo, Hurd & Brandt, PL, specializing in immigration law, with options to meet attorneys, and inquire about various visa services.But what if the default color for displaying phone numbers is set to black, and on the mobile website there is a black background?”  Problem! No one will be able to see the phone number, as it is being overwritten by the phone’s default settings. The picture to the right is a picture of the issue I was running into. The CSS was telling it white – but the iPhones’ default settings were telling it black.

You can correct this problem by adding a simple script to the header area of your mobile website. The script is “<meta name=”format-detection” content=”telephone=no”>”. This tells the phone as it reads the header file to not use the default phone number color set by the phone, and instead to use the CSS.

A smartphone displaying a website for Colombo, Hurd & Brandt, PL Immigration Attorneys. The site offers sections for various services such as attorney information, defense, visas, and contact details.After applying the script to the header document, the problem was solved. The picture to the right is how the mobile website will look now with the correct script applied to the header.

If you would like to learn more about PaperStreet Mobile Websites please visit our Mobile Web Design page or feel free to contact us today for a free consultation.

Share This

Join the Sales and Marketing News, receive our last insights, tips and best practices.

Our 7 Guarantees

Keeping 2,000+ Clients Happy Since 2001.

1
You Will Love Your Design We design to please you and your clients
2
Same-Day Support 24-hour turnaround edits during business hours
3
Free Education We provide knowledge to help you expand
4
No Hidden Charges We quote flat-rate projects
5
Own Your Site No strings attached
6
We Create Results SEO, PPC, content + design = clients
7
We Make Life Easier One agency for web, branding and marketing