Leo’s Tech Blog
Published in

Leo’s Tech Blog

Beware: Mobile Safari’s phone detection changes the DOM and can mess your CSS styles

Posted by Leo Soto on November 17th, 2011.

This is just a quick tip which hopefully can make someone save a few hours of pain: If you have a webpage which works perfectly on every decent browser on the earth (that excludes IE6, of course) but, which has some CSS issue on the iPhone and iPad, and only on the devices running iOS5, the likely reason behind the issue is that Mobile Safari is changing your DOM

Long story short: Remember that nifty iOS feature in which you simple tap a phone number inside a web page and your iPhone immediately calls such number? Well, Safari does that by modifying your DOM. In my particular case, it messed a float style in a web page I’m maintaining.

Ironically, by messing with that little float, the phone numbers presented in our webpage became totally messed up, so you couldn’t tap nor read them. There you have another evidence that we are still a long way from having real artificial intelligence ;)

Anyway, if you don’t want Safari to mess with your DOM, simply put the following meta tag in your HTML:

<meta name="format-detection" value="telephone=no">

And well, if you still want your users to tap on phone numbers, simply do the markup explicitly in your code, like this:

<a href="tel:1-404-123-45-67">123-45-67</a>

Originally published at techblog.leosoto.com on November 17, 2011.

--

--

--

A personal blog on tech stuff. Includes older entries that used to live on techblog.leosoto.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Leo Soto

Leo Soto

CEO at ContinuumHQ.com, MITI.cl founder. Passionate software developer & MBA

More from Medium

Web App Page Crashed but No Exception Was Reported

How to Create Glowing Images with React

3. First steps in React

Trying out Svelte: Framework without a framework