You are hereFixing the Apple iPad, iPhone, and Touch's Problem with Displaying Data as Phone Numbers

Fixing the Apple iPad, iPhone, and Touch's Problem with Displaying Data as Phone Numbers


By steve - Posted on 17 September 2010

I had a problem with a data heavy website not displaying numbers correctly when accessing the site from an iPad.

Specifically, numbers in a table would show up as blank on the iPad, but look great on every other browser. I thought it was a css issue, but the problem was that Safari was "helping" me by converting these number strings into links that, when you touch the screen, would ask if I wanted to add a new contact. That was my first hint. When I said, yes, I did, it took the number and tried to format as a phone number.

It turns out there isn't a way to turn this off in Safari or the iPad, but you can fix it by creating a meta tag...

The problem with that was that I don't really have access to the meta tags when I use SugarCRM as my framework. Those tags have long been outputted to the browser by the time my code gets to start doing things.

Here's the link to the explanation by Apple about how to handle links that might be phone numbers and the meta tag needed: http://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_...

Here's the meta tag you need to include:
<meta name = "format-detection" content = "telephone=no">

So, the trick I came up with was to use javascript to update the meta tags AFTER they've already been generated:


<script type='text/javascript'>
var myhead = document.getElementsByTagName('head')[0];
var metaNode = document.createElement('meta');
metaNode.name = 'format-detection';
metaNode.content = 'telephone=no';
metaNode.id = 'metatag';
myhead.appendChild(metaNode);
</script>

You can include this anywhere in the html output you generate and it will keep your numbers formatted the way you like.

In SugarCRM, you can add these to a particular theme, like in the get_module_title() function, or you can include it in your .html file or as part of an echo in your php script. If you want it on all of the pages, you can include the meta tag in the main index.php script (in the older SugarCRM versions, anyway).

Thank you so much. I found a lot of forums with this question, but you were the first to truly answer it and give me the solution. The java script worked perfectly the first try.

Did this help you? You can help me!


Did you find this information helpful? You can help me back by linking to this page, purchasing from my sponsors, or posting a comment!


+One me on Google:


Follow me on twitter: http://twitter.com/mojocode







Comments



Affiliation Badges