Disabling Phone Number Links on iOS
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.
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.
<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:
Anyone have any other suggestions? I’d love to hear them!
Leave a Reply
You can specify phone numbers with `a` tags.
“`htmlLink to comment
Oh sadly, it looks like your comments don’t support markdown 🙁
Let’s try again…Link to comment
Yeah, problem is I needed to disable them….
Odd that the WordPress flavored markdown isn’t used in the comments. I’ll give that a look.Link to comment
@Rob jacob means that first disable them(divs) all, then use “a” tag where tel links are needed.Link to comment