The phone number is not shown in safari on iOS

Question

I have an html page which has a following text:

<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: [email protected] or by phone: 888-888-8888</font>

It does show well in every browser except Safari on iOS. The number is there, because you can click on it, and the iOS device prompts you to call this number. It is just not visible.

One of the solutions I found is to add the following line of code to the head of the page:

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

The number becomes visible, but Safari does not recognize it as a phone number anymore, so the user can not do a tap-to-call.

The other solution is to make the phone number a link:

<a href="tel:888-888-8888" style="color:#000">888-888-8888</a>

But in that case IE actually tries to go to the "tel:888-888-8888" link, so it is not the best solution at all.

So the question is: Is it possible to keep the phone number as text, but make it visible and recognizable as a phone number in Safari on iOS devices?

Additional info:

Font is white because it is specified in the CSS file for links. I do not want to change it, because this will affect all other links, which are suppose to be white. It is only the safari on iOS which makes a hyperlink from the phone number.

Answer 1

Try to create separate class of links which is the same as original and make every link in your code the link of that class. Leave the phone number as a plain text. It should work.

Answer 2

This solution worked for me

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

I found it here. https://css-tricks.com/forums/topic/phone-numbers-not-displaying-in-safari/

It seems it is a strange css issue with the way safari deals with the numbers.