I came across a situation today where a website I was working on had a number that my iPad thought was a phone number but alas, it was not. We were showing a product number, which included four and three digits separated by a dash. This was enough for IOS to format-detect it as a phone number, and link it as such, which I definitely didn’t want.

Below is what it looked like on and iPad. Interestingly enough, no android device I tested on had this issue. Apparently the detection they do for phone numbers is more (or less) verbose.

ipad_phone
Oh good. Now I can give this product a ring later.

My Solve

Based on Apple’s documentation, certain format detections can be disabled with meta tags. I decided to go this route, as there were no other phone links on this page, since this solution disables them all. The below meta tag goes in the header, and viola! Phone links disabled.

HTML

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

Removing Individual Links

What if you have one link on a page you want to remove, but want to keep the other phone links in tact? I’d be interested to hear feedback on the best way to accomplish this, as I couldn’t really find a good way. I saw some posts recommend using the soft hyphen character (­), but that didn’t seem to work for me, and seemed like kind of a hack.

What would be really nice would be some type of attribute applicable to the tag, disabling any format-detection. Something like this:

HTML

<div format="telephone=no">555-5555</div>

Anyone have any other suggestions? I’d love to hear them!