• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 177
  • Last Modified:

how do I display phone numbers on my web page so that iphones do not see it as a link?

On my web page the phone number displays ok on a pc and on some mobile phones like Samsung.
On some iphones it displays as a pale blue link.
How do I make my web page so that it shows the phone number in the font and size I decide.
Thank you.
www.americancarsuk.com
0
MalcolmBishop
Asked:
MalcolmBishop
  • 4
  • 3
1 Solution
 
John EastonDirectorCommented:
The Blue links are useful for iPhone users at it allows the to click the link to make a call.  However, if you don't like then there are a couple of options (although I have not tried them).

One option is to add a meta tag in your head section. e.g:
<head>
   <title>iOS blue links test</title>
   <meta content="telephone=no" name="format-detection">
</head>

Open in new window


Or you can wrap your links in a styled span. e.g.:
<span class=”appleLinksBlack”>0123 456 789</span>

Open in new window


And add the following to your CSS:
 
.appleLinksBlack a {color: #000000 !important; text-decoration: none;}

Open in new window


More detail is available from https://litmus.com/blog/update-banning-blue-links-on-ios-devices which I where I learned of these options.
0
 
MalcolmBishopAuthor Commented:
The problem with some of the iphones I looked at is the blue link is very pale.
I use a pale blue background on my webpage and you could not see the link at all as it was almost the same colour.
This must have been happening for several years on my webpage and nobody has mentioned it as I test the webpage on my Samsung which always displays exactly the same as a pc.
I am puzzled whether every webpage in the world has to do this just to satisfy Apple users.
I have not noticed it in the source code of other pages.
I will try your option 1.
It is not possible for me to view the new change as I do not have an iPhone here.
I will do the change and contact iPhone users tonight. I think that is the only way I can test it.
0
 
MalcolmBishopAuthor Commented:
Just read the article you pointed me at and I am still confused about web pages.
I am puzzled whether every webpage in the world has to do this just to satisfy Apple users.
 I have not noticed it in the source code of other pages.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
John EastonDirectorCommented:
I can't say I've looked into other pages source code.  However, as an iPhone / iPad user most sites I visit have the blue highlighting.  On my own sites most (if not all) have had the number on a white background so I have not need to implement the changes.

However, it is not just Apple users.  Website often display differently in different browsers.  I recall Skype (I think) once had a browser plugin that highlighted numbers and clicking them initiated a call through Skype.  And who knows if Android or Windows phones have a similar features (I have not used either).

Therefore as web designers there are often things outside our control which can affect how the finished website looks to end users.  Some we just have to accept (like the different screen sizes), others we can take some steps to address like your example above.
0
 
MalcolmBishopAuthor Commented:
Have added the code in your option 1 above.
By pure coincidence a customer with an iPhone has just arrived.
The phone number ( which is on 3 different lines on the page) now displays exactly as I built it.
Although that is a result I have several hundred pages of cars.
I am presuming I will have to upload that code to every single page. It will take me weeks.
Appreciate your solution, but would like to keep question open for a few days in case another solution pops up.
0
 
John EastonDirectorCommented:
I take it all your pages are static HTML and not a programming front end (e.g. PHP) with a database backend?

You should be able to find software to do find and replace on an entire directory.  E.g. replacing the closing title tag with the closing title tag, plus the new meta tag.  However, if doing this make sure you have a backup of the folder as you would not be able to 'undo' if you got anything wrong!

Notepad++ I think can do this, but if you use FrontPage or similar to edit your site it may also be able to do it.
0
 
MalcolmBishopAuthor Commented:
Thank you for the solution.
Cheers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now