Weird mobile phone problem - blue text on iphones

[karmacomposer]

I have a weird problem.

I created a responsive site from a template using Xara Designer Pro 11. I put a phone number on both the mobile and desktop sizes and colored it white.

On android, the site looks perfect. On iphone 4, 5 and 6 the phone number is not white, but dark blue??????

I don't think it's a clicked link issue. It is not a link at all - just text.

The phone number is at the top, just under the logo and NAVIGATION menu.

Anyone have any suggestions?

Site is www.cruisecaptain.us

Mike

[Acorn]

Works here.
Perhaps you should clear your browser's local cache (Ctrl+F5) to force a fresh download.

Acorn

[karmacomposer]

My client called this one in - it seems his clients were trying to use the site and noticed the text color on their iphones. He had 8 clients report this on iphone 4, 5 and 6.

I actually went up to a total stranger in McDonalds who was using an iphone 6 and asked them to go to the site, so obviously they never went there before. They went to the site using Safari and the text was blue - I saw it for myself first hand.

On my LG Android phone (brand new), it looks perfect. On my Note 3 it looked perfect and on every other Android phone it looks perfect. Same with the Desktop on Windows. Have not looked at Mac yet, but I will now.

Mike

[haakoo]

Seems an old issue with ios converting anything that's a telephone number or possible url into a link
Here's a solution and a blogpost about the issue,hope it helps https://gist.github.com/townivan/8246897

Hans

[karmacomposer]

Thanks. I hope I can attach the HTML and CSS code snippet to the phone number text in Xara. Can I?

Mike

[siran]

You can add a class name (for example telephone-text) to a html element that Xara creates if you add the name htmlclass=telephone-text to your text line.
But you have to be aware of the fact that Xara assigns the class to the parent div element, so you have to change the CSS a little bit.
Usually adding the following line to the HTML code (head) of the page properties should work (but I have no smart phone to test on)
<style type="text/css">.telephone-text span a {color: #ffffff !important; text-decoration: none;}</style>

[Rob-Xar]

iOS will change what it thinks is a number to a link to call that number, Android does not. This is why your numbers are looking dark blue in iOS

https://developer.apple.com/library/...honeLinks.html

As per the article above, enter that meta data in the website HTML Code HEAD to disable it.

Rob

[karmacomposer]

Thank you. I put the code in place. My client will test it and report back.

Mike