Today, I'm here with a solution for yet another Rendering problem on iPhone due to the default Styles being applied to particular Elements of your Web App.
Often developers do not want iPhone applying many of the default Styles which makes them look different from the Developers favorite Design.
In this case, iPhone applies default Underlining and default Blue coloring on the Telephone Number. In some cases, if Skype is installed on iPhone - Phone Numbers will also be applied with default Styles of Skype which makes your Telephone Number a Tap-able button along with a Country Flag. Which in turn may break the content flow many time out of all the cases recorded.
To over come this - I have a simple and effective way. I know that most of you may be aware of this. But, still I want to make you believe this is the way to do it.
What you have to do?
You need to command your Browser installed on iPhone - Not to detect Telephone Number. Thus indicating it to allow Telephone Number to be treated as Plain Text. So that it can retain its Original Styles applied as per the Developer Design.
What should be added to Eliminate this issue with iPhone?
You just need to add a <Meta> tag in your HTML page.
Which is that <meta> tag?
Where exactly should the <meta> tag be added?
You need to do to the starting of the HTML page where you will find <title> tag residing. DO not worry if already there is another <meta> tag, just paste it below.
What the above <meta> tag do?
When ever iPhone encounters a Telephone Number - It ignores it and treats as plain text and in-turn retaining the Original Styles applied by the Developer.
Please let me know how useful was this to you. Please leave your Words/Questions as comments - I'll try to get back to you.