How to disable phone number linking in Mobile Safari?

iphone safari mobile-safari

293,586

Solution 1

This seems to be the right thing to do, according to the Safari HTML Reference:

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

If you disable this but still want telephone links, you can still use the "tel" URI scheme.

Here is the relevant page at Apple's Developer Library.

Solution 2

I use a zero-width joiner &zwj;

Just put that somewhere in the phone number and it works for me. Tested in BrowserStack (and Litmus for emails).

Solution 3

To disable the phone parsing appearance for specific elements, this CSS seems to do the trick:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

The first rule disables the click, the second takes care of the styling.

Solution 4

I was having the same problem. I found a property on the UIWebView that allows you to turn off the data detectors.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

Solution 5

To disable phone number detection on part of a page, wrap the affected text in an anchor tag with href="#". If you do this, mobile Safari and UIWebView should leave it alone.

<a href="#"> 1234567 </a>

View more solutions

293,586

Author by

benzado

I am a software engineer/developer/programmer in New York City. As of August 2015, my main thing is LogCheck. My side thing is Heroic Software. (So side, it's not worth linking to.) One of these days, I'll start blogging again.

Updated on July 18, 2022

Comments

benzado almost 2 years

Safari on iPhone automatically creates links for strings of digits that appear to the telephone numbers. I am writing a web page containing an IP address, and Safari is turning that into a phone number link. Is it possible to disable this behavior for a whole page or an element on a page?
Joe Dargie almost 14 years

Hi Bob. If you want to put in HTML code examples, you have to wrap the code in backticks, <like this>. (Stack Overflow uses a formatting language called Markdown.) I’ll edit your answer accordingly.
BobFromBris almost 14 years

That didn't ultimately work - when I reloaded the App, the link hiliting was back. I have resorted to adding a# character to the front of the phone number: according to the Apple doc "Apple URL Scheme Reference": "Specifically, if a URL contains the * or # characters, the Phone application does not attempt to dial the corresponding phone number."
mhenry1384 about 13 years

This simply doesn't work. Not for web apps on iOS 4.3.1 anyway.
mhenry1384 about 13 years

You should remove your answer, since it doesn't work. As you yourself acknowledge in the above comment.
Mark Brackett about 13 years

4.2.1 on iPhone works; developer.apple.com/library/ios/#featuredarticles/…
somewhatsapient about 13 years

This isn't really an answer per se -- i'm just trying to lend my voice to say that this works in iOS 4.3.3, at least for me. cheers
Geert almost 13 years

Unfortunately, in Internet Explorer I get those broken image icons. Adding width="0" height="0" helps, but still a single pixel is displayed.
iandotkelly almost 13 years

At last, a solution that worked for me. Of course this will only work with people writing their own objective-c application using UIWebView, and not using the Safari app. Thanks!!
JustJohn over 12 years

This is what I ended up doing since the meta tag didn't work. However, it's probably better done with <a href="javascript:;"> to prevent side effects from a URL change.
benzado about 12 years

Looks to me like this sets the color explicitly. In other words, it will be gray no matter what.
Deamon almost 12 years

Can you do this on per element basis instead of turning it off for the entire page?
Dave Stein almost 12 years

Just wanted to note this also works for recent versions, such as 5.1.1 which I'm on now.
Oliver Tappin about 11 years

Does anyone know how to do this for emails?
geedubb over 10 years

@Bob Nice clean tip. We had issues with HTML in an email. Wrapping in a label worked nicely +1, thanks
EeKay over 10 years

Works nicely in my Cordova 3.3.1-0.1.2 based project! using tel indeed lets you still recognize a phone number. +1
Joe Dargie about 10 years

“Depending on the font you use, the first two are barely noticeable” Unless the user has set iOS to read the content out to them. Then it’d be pretty noticeable.
Joe Dargie about 10 years

“pointer events stops it from being viewed like a link in a browser” — in a browser that supports pointer-events, sure. If the user is viewing your HTML e-mails in IE 10, however, no good.
Christopher King about 10 years

Works on Safari Mobile on iPad and iPhone running on iOS 7.x
craigpatik about 10 years

Note that this does not work if you insert the <meta> tag with JavaScript (at least on iOS 7.1). The tag has to be in the HTML when the browser downloads it.
Irae Carvalho almost 10 years

well, I cannot say about the original poster, but in my case Safari is guessing phones that are not actually phone numbers, they are financial data
t_motooka almost 10 years

@Titanium This <meta> trick works fine for the mail app on iOS 7.1.2. Just insert <meta> tag into the <head> tag in your HTML mail. Please note that we cannot apply this trick to text/plain based mails.
jww almost 10 years

The question is about suppressing detection of phone numbers, not mailing addresses.
jww almost 10 years

The question is about link detection on telephone numbers, not editing them.
Holger over 9 years

This is also the fix I ended up using and it work very well and is quite simple.
Simon Darby over 9 years

This works for me in HTML email. I only wanted to disable one phone number, not all. I just added the style="text-decoration:none;" to the tag with the color to match the rest of the text, and you could change the cursor style too.
Radek Pech over 9 years

You don't need images, just put any HTML inside the number: <p>Not a phone: 112<span>34</span>56</p>
stephanfriedrich over 9 years

This isnt a good Answer, because you generate willful bad HTML.
jpostdesign about 9 years

Can this be applied on a case by case basis? For example, 1 number string on a page I don't want to be interpreted as a phone number, but keep the behavior for 6 others on a page that I do want to be automatically interpreted as a phone number?
BoffinBrain almost 9 years

@jpostdesign Since it's a meta tag, it applies on a per-page basis. Unless all the pages on your site share a common header and footer, it should be trivial to add the meta tag to just one page.
sulaiman sudirman over 8 years

Thanks. This works on ionic as well, put it in index page.
HelpNeeder over 8 years

@Geert, set line-height and font-size to zero.
mikevoermans about 8 years

Great solution where you want to restrict styling/formatting in very specific location.
Jonah about 8 years

For accessibility (like text reader mentioned above), or if the user copy/pastes into the phone app, this just breaks things. Also, in general if a spider from Yelp or Google or the like is indexing a business, and pulls the wrong phone number, that's no good.
vinboxx about 8 years

This works for me. I just add it before the first number.
Nick about 7 years

I created an HTML email signature and this was the only solution that helped to prevent iOS 10 mail from falsely detecting a (non-phone) number as a phone number.
greaterKing almost 7 years

This helped me when needed to still use the default iOS styling and actions but ignore specific elements.
Ain Tohvri over 6 years

Neat solution. Worked fine on iPhone 6S(+)/iOS 9.
Arnie over 6 years

Works for me :)
nathanbirrell over 6 years

Works well, also works for React Native WebView components (which are basically Safari wrappers I suppose anyway)
Mark Reinhold over 6 years

This is the only workable solution if you're asking Mobile Safari to load an XML file that uses an <?xml-stylesheet> directive to generate the HTML page. Mobile Safari converts any long number in the original XML into a "tel:" link, even though the source isn't HTML (!).
Admin about 6 years

Works like a charm. Thanks a lot ^_^
Daan almost 6 years

You might want to mention that this is a workaround.
Nosajimiki over 5 years

In some cases you may have a phone number on a website where you need to perform some other operation than making a phone-call like pulling up an option to edit it, or the ability to click-and-drag it to somewhere else.
jahller over 5 years

he does not want to have ip addresses linked as phone numbers
Matt Komarnicki about 5 years

This works perfectly fine under IOS 12 in 2019! 👍🏻
JKM over 4 years

AWESOME: zero-width joiner &zwj; This is the best solution fo random numbers that are getting converted to phone numbers! So for example, if you have 345 456 789 - which you want to NOT be a phone number... &zwj;345&zwj;456&zwj;789
Zaya about 4 years

Great! Thank you.
user3615851 over 3 years

This worked for me when Safari was adding link styles to random numbers in the same div. Set everything to inherit for the tel element
Danny over 3 years

Best solution for one-off cases. For example: when Safari thinks a certain element is a phone number and it isn't, but you don't want to override all other instances of phone numbers on the page.
jsmars over 3 years

This worked great for me for some hidden javascript numbers I needed that safari was interpreting as phone numbers, thanks!
kmgdev about 3 years

This is the best solution, IMO, since it doesn't require making any modifications to the HTML.
Nguyen Van Vinh almost 3 years

Thank you. Applied for Brave Browser on iOS
2540625 almost 3 years

This works for Safari—but what’s the fix for Chrome and Firefox?
OZZIE almost 3 years

doesn't work in iOs 14 and 13 at least not when it's not a link