iOS has a handy built in feature: automatically sensing phone numbers and making them active links. When you touch them you get a dialog to make a call to that number. Unfortunately this can cause problem with your layout and your pages.
Layout
When iOS makes a number dial-able it enlarges it, as in this example:
| Desktop | iPhone |
|---|---|
 |
 |
iOS has changed the source code of the document by injecting data attributes around the phone number as shown in the before and after code samples below:
Before: Call 800-585-5055
After: Call <a href = “tel:800-555-5555” x-apple-data-detectors=”true” x-apple-data-detectors-type=”telephone” x-apple-data-detectors-result=”1”>800-555-5555</a>
Normally, this would only require that you be aware of the transformation and style it appropriately, as below:
Wrong Number
The problem arises when iOS makes a mistake, which is quite common. It often interprets other numbers, like serial numbers, skus and order numbers as phone numbers. The problem then becomes how to remove the dial link.
This can be achieved by adding this meta tag to the head of your document:
<meta name="format-detection" content="telephone=no">
The problem with that is that it will un-link any phone numbers on your page as well. Since enterprise websites use templates for headers and footers (where the customer service number is usually located) adding this will turn off dialing throughout your website.
A quick easy solution for this problem is to add a “#” in front of non-phone numbers. Unfortunately, it must be immediately adjacent to the digits. If you try to wrap it in a span or other markup in the hope of hiding it with CSS it will not work.
Another alternative is to wrap the number in an anchor and mark it up like this, where [digits] is replaced with your non-dialable number:
<a href="#" x-apple-data-detectors="false">[digits]</a>
Unfortunately this requires that you have a non-working anchor on your number.