When viewing a website on a mobile device such as an iPhone the text showing phone numbers is a different color than on desktop version of the site. Is there a setting where I can modify the color of this text on mobile site but only have it affect the mobile site. Everything looks fine on desktop version it’s just the mobile version
By default, iOS formats anything that looks like a phone number as a link. When doing this, it also changes it’s color. Apple is trying to make it easy for a user to click on a phone number to call the number.
You can add this meta tag to prevent the auto-formatting.
<meta name="format-detection" content="telephone=no">
Detailed info on all Apple-specific meta tags:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
1 Like
Thanks for this. That takes care of my problem.
Hi there
I have the same issue, but after some consideration, I’ve decided to leave the phone number alone since I think it’s a pretty good accessibility feature to allow folks to hit the link and dial the number. However, what I don’t want is for the number to adopt the same colour as other links because it interferes with readability.
Having done some research on meta tags, I discovered that the color attribute has been deprecated, so I dug some more on CSS and found this, which was a great help.
In the Header stack I simply added some CSS around the number and voila! It works - the link colour is now white, as opposed to the link colour in the Foundry Control Centre. However, it only displays correctly on my Mac. My iPhone still displays the number in the link colour.
I need this to be consistent across all devices, so any clues what I’m doing wrong?