Solved

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

Posted on 2015-02-09
7
145 Views
Last Modified: 2015-02-16
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
Comment
Question by:MalcolmBishop
  • 4
  • 3
7 Comments
 
LVL 10

Expert Comment

by:JEaston
Comment Utility
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
 

Author Comment

by:MalcolmBishop
Comment Utility
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
 

Author Comment

by:MalcolmBishop
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 10

Expert Comment

by:JEaston
Comment Utility
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
 

Author Comment

by:MalcolmBishop
Comment Utility
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
 
LVL 10

Accepted Solution

by:
JEaston earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:MalcolmBishop
Comment Utility
Thank you for the solution.
Cheers.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now