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: salesperson@company.com 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.

Answer 3

The font tag is obsolete and shouldn't be used. It was deprecated in HTML 4.01 and is completely unsupported in HTML 5.

If you apply your text styling via CSS, it should show up in mobile Safari.

Instead of:

<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: salesperson@company.com or by phone: 888-888-8888</font>

Try:

<span style="font-family: Tahoma, Geneva, sans-serif;">
      Please contact our sales person by email: salesperson@company.com or by phone: 888-888-8888
</span>

Ideally, you'd use style sheets to specify the page's presentation, but if you just want a drop-in solution, that should work. Write valid html, though, and you won't run into this kind of problem.

Answer 4

It seems iOS will turn the phone number into an anchor even if it's not in an anchor. Give it a class or id and then style your anchor.

.contact { }
.contact a { text-decoration: none; color: #000000; }