How to properly apply Mobile Browser Telephone Number Detection

While building a mobile browser website today, I came across a strange problem on my iPhone. I was building a real estate website which had the clients phone number on the page, and it had listing addresses which if they were of the right length (7 or more digits) Safari was converting them to phone number links.

Here is the original code, first is the telephone number, second is the address:

<div id="call-portrait">555-123-4567</div>
<p>111-1234 Main Street Vancouver, BC</p>

A quick search for how to disable telephone number detection in mobile browsers offered me the following meta-tags (first one is for iOS/iPhone, second is for Blackberry):

<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">

After I applied this code addresses were no longer links, but neither was the clients’ telephone number. Further searching turned up an HTML method of inserting telephone numbers into code that I was not aware of which is similar to the mailto format:

<a href="tel:555-123-4567">555-123-4567</a>

So wrapping text or an image inside to that tag turns the telephone number into a usable link. The one drawback, not that it seems to be a real problem as there are already telephone number harvesters out there, is that this method provides a more efficient way for said harvesters to obtain phone numbers from your website.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>