Mobile HTML rendering numbers

问题:

I have a mobile WEB Page showing a bank statement. Something like this:

DATE          | DESCRIPTION              | AMOUNT
--------------|--------------------------|---------------
Jan 2nd 2010  | Clothes                  |  USD 1.839.000
Sep 23rd 2010 | Drinks                   |  USD 2.837.000

I am using . as a thousand separator since that's our locale configuration for that.

HTML is very simple. Something like this:

<table>
   <tr>
      <td>DATE</td>
      <td>Clothes</td>
      <td>AMOUNT</td>
   </tr>
   <tr>
      <td>Jan 2nd 2010</td>
      <td>Clothes</td>
      <td>USD 1.839.000</td>
   </tr>
   <tr>
      <td>Sep 23rd 2010</td>
      <td>Drinks</td>
      <td>USD 2.837.000</td>
   </tr>
</table>

The problem I am having is that iPhone's Safari, Android Browsers and some Nokia Browsers are thinking (erroneously) numbers such as 1.839.000 and 2.837.000 are phone numbers hence rendering them as links to make phone calls or do some texting.

My question: Is there a special TAG/ATTRIBUTE/CSSSTYLE to tell mobile browser to show that kind of text as plain text?

Thanks a lot.

回答1:

I don't know about Android or Nokia, but for iPhone you could use the meta tag:

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

to disable detecting anything as a phone number.

回答2:

Here's how you do it for the iPhone, which seems to work for Android as well; it may work in other browsers, that's all I have to test with at the moment:

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

回答3:

In case you want to keep the functionality that recognises the phone number as such and allows you to tap it, use this solution:

Since iOS adds a <a href="tel[phone]"> tag around the number, all you have to do is make a css rule that styles this tag:

a[href^=tel] { color: inherit; }

credit goes to this Razor Edge Labs article.

回答4:

Longshot, but, try writing the period as . - there are smart codes that can disable that for mobile safari, etc, but that only works for one-two devices. If you're lucky, you'll bypass their regex.

回答5:

As discussed in the comments, adding arbitrary spans seems to break detection for the browser in question:

<span>2</span>.837<span>.000</span>

however, an explicit solution in the form of a "don't parse this" attribute or Meta tag would of course be preferable, as it would be more certain to work in the future and for all/most platforms.