Phone Number Formatting Issue on iOS Devices (iPad/iPhone) - Solved

**StevenWWinters** · 20 February 2013, 11:21 PM

Problem: Safari browser on iOS devices (iPad/iPhone) will override html/CSS formatting for numberic sequences it recognizes as a telephone number. On iPads, when the phone number is clicked (touched), a dialog to “Add to Contacts” is displayed. On iPhones, a dialog to Call the number is displayed. Safari inserts an html anchor tag in the form of
<a href=”tel:123.456.7890”>123.456.7890</a> around any number sequences it thinks is a phone number.

The Windows browser screenshot (below) is what you want to achieve. There are two phone numbers in the web page. The first one has been "fixed" to retain formatting and allow for iOS/Safari to treat as a phone number. The second one has not been fixed.

Click image for larger version.

Name: iOS-Safari-Phone-Number-Issue.jpg
Views: 427
Size: 94.8 KB
ID: 94610

Solution 1: Turn off the phone number recognition by adding the following meta tag to your web page <head> section.

Code:

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

In Xara XDProX, this can easily be done using HTML Code Insertion via the Web Properties / Page / HTML code (head) dialog. All phone numbers will now be ignored in Safari and displayed as formatted.

But, what if you want to keep the phone number recognition by iOS devices, but still control the formatting?

Solution 2: Create a custom STYLE in XDProX and add CSS style code to your <head> section to force the phone number format to your liking and consistent with your document.

1. Create your text which includes phone numbers.
2. Select a phone # in your text area, format (bold/italic/color) as desired.
3. With phone # still selected, from the Style Dropdown, select Create style.
4. Give the style a Name (e.g. myPhoneStyle).
5. For Type, select “Character style” option.
6. For Based on, select “a Underlying paragraph style” and click OK.
7. Insert CSS style via Web Properties / Page / HTML code (head) dialog, and click apply.

Code:

<style>
span.myPhoneStyle a[href^=tel] { color:Green;text-decoration:none;}
</style>

To test yourself, simply export the web page in the attached .xar file and upload to a test folder on your website (not local hard drive, obviously). Then browse to the location in both your iPad or iPhone and in any Windows browser. (Linux/MacOS should work, but haven't tested.)

REFERENCES:

http://developer.apple.com/library/s.../MetaTags.html

http://www.w3schools.com/cssref/css_selectors.asp

http://banagale.com/view-source-from-safari-on-ipad.htm

**gwpriester** · 21 February 2013, 01:07 AM

My only experience with this is my Nokia Lumea 710 Windows phone. Phone numbers are automatically linked without any script.

**Egg Bramhill** · 21 February 2013, 05:06 AM

It's very simple to link to a phone number:
Just add
tel:07967374127
to Web Properties / Link / Link to an Web or Email address

Don't know what value there is to using a period notation such as tel:123.456.7890

**StevenWWinters** · 21 February 2013, 10:37 AM

Originally Posted by Egg Bramhill

It's very simple to link to a phone number:

The issue isn't on how to add a link. The issue is that Apple's mobile browsers change your HTML on the fly by inserting a link and in the process strips your formatting (of phone numbers) so that it doesn't match your original design.

Originally Posted by Egg Bramhill

Don't know what value there is to using a period notation such as tel:123.456.7890

I suspect that its a regional convention, with periods, or parenthesis and hyphens used for readability. Breaking larger numbers up often makes it easier to use. However, back on point, even the phone # you posted without periods is transformed by Apple's Safari browser on iPad/iPhones.

This method described here will allow you to overcome that (in XDProX) and retain your design. If you are not concerned with how your page looks in an Apple mobile device, it's really a non-issue.

Additionally, of course you could convert every phone number to an image, but that could be cumbersome depending on the number of occurrences and you would lose the "feature" of being able to click on a number to call it without having to type it.

Thread: Phone Number Formatting Issue on iOS Devices (iPad/iPhone) - Solved

Thread Tools

Display

Phone Number Formatting Issue on iOS Devices (iPad/iPhone) - Solved

Re: Phone Number Formatting Issue on iOS Devices (iPad/iPhone) - Solved

Re: Phone Number Formatting Issue on iOS Devices (iPad/iPhone) - Solved

Re: Phone Number Formatting Issue on iOS Devices (iPad/iPhone) - Solved

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions