15

I'm writing a very simple page that is supposed to be viewed on mobile devices. While viewing it in the iphone simulator I noticed that the iphone browser automatically turns any number string into a link, supposedly for dialing it directly.

Problem is - there are a ton of numbers on my page that LOOK like phone numbers but actually aren't. Is there a way to tell the iphone browser to leave these numbers alone?

Improve this question
22

Very poor implementation on Apple's part (I hear this also happens on the iPad, where it makes no sense whatsoever), but there is a fix:

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

Source: http://www.darowski.com/tracesofinspiration/2009/03/31/stop-iphone-from-incorrectly-auto-linking-phone-numbers/

One of the comments on that page also suggests the use of the controversial soft hyphen (&shy;) to prevent auto-linking of a specific number (so the browser can still auto-link other numbers on the page).

Additional Info

If you want to link certain numbers but not others, I would personally use the format-detection meta tag to disable autolinking numbers, and then explicitly link the ones that are phone numbers:

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1 itemprop="name">Foo Co.</h1>
  <dl>
    <dt>Phone</dt>
    <dd><span itemprop="telephone"><a
      href="<?php echo ($isMobile? 'tel' : 'callto') ?>:+15555555555">
      555-555-5555</a>
    </span></dd>
    <dt>Client ID</dt>
    <dd>1234567890</dd>
</div>

The PHP snippet is there to swap out the tel: scheme for callto: if it's not a mobile browser. This way Skype and other desktop VoIP programs can be triggered when the link is clicked.

Improve this answer
4
  • This is a great solution, but what if there are only certain numbers that you don't want converted to links? Is there a way to do it by class or attributes only? – Dan Sep 20 '13 at 18:55
  • 2
    @Dan: There's really no ideal way to do that beyond using &shy; to break up the number. What I would do is to disable iOS' Safari's auto-linking of numbers and then just explicitly indicate which numbers are actual phone numbers using semantic markup. – Lèse majesté Sep 21 '13 at 0:01
  • Yeah, that's probably the best solution for my particular case. Thanks! – Dan Sep 21 '13 at 0:23
  • I had the problem with incomplete dates like 2020-01. For these cases, it is possible to wrap them with the html time tag, e.g. <time datetime="2020-01">2020-01</time>. This also prevents the call number detection. – Milania Jan 5 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.