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:
Originally published at techblog.leosoto.com on November 17, 2011.