Phone Numbers and iOS – CSS Debugging!

While working on the Marram redesign the client found a style inconsistency on his iPad (which wasnt one of the platforms we we’re testing on) that I just could not replicate anywhere else (I tried different browsers, older versions etc) so it was quite tricky trying to figure out what was happening.

iPads may have some sort of developer tools for Safari but I couldn’t look into it because I was borrowing iPads throughout the week from different people and didn’t want to end up changing their settings.

So I was pretty much making tweaks and refreshing the page to see what affected what.

The problem happened with the phone number which was sitting as part of the main navigation (but it was static and not clickable). My PC and its browsers were displaying the phone number fine but the iPad seemed to screw that part of the navigation up.

After numerous attempts at tweaking the styles and even tweaking the HTML I finally found out that the iPad was turning the phone number into a clickable link (most probably because if you were on an iPhone you could simply click the phone number and make a phone call – not sure why it does it on an iPad though).

I guess it makes sense that it does that but again it took me a while to figure that out! the phone number was part of the main navigation so it had picked up all the styling of the normal navigation items (like display:block; and padding etc).

I ended up styling the phone number into an actual link like so:

<a href="tel:5551234567">5551234567</a>

So if users on a PC click on that number they will get prompted to pick a program and then they could use Lync or Skype to make the call.