How to Stop Mobile Safari from Auto-Formatting Phone Numbers?

Styling Telephone Numbers in Mobile Safari

When viewing a telephone number on an iPhone using Mobile Safari, it's frustrating to encounter the default blue hyperlink styling. This can create unwanted formatting inconsistencies and disrupt user experience. If you're facing this issue on your website, multiple solutions are available to remove the blue styling.

1. Disable Auto-Formatting Using Meta Tag:

Add this meta tag to the head of your HTML document:

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

This meta tag informs Mobile Safari not to automatically format telephone numbers, allowing you to control their styling manually.

Note: If you have phone numbers on the page that should be clickable, you need to manually format them as links using the 'a' tag:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2. Remove Styling Using CSS:

Option 1:

Target links with href values starting with 'tel':

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
  /* Additional CSS styles here */
}

Option 2:

For situations where you can't use a meta tag, such as in HTML email templates, wrap phone numbers in anchor tags and target their styles using CSS:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  /* Adjust other CSS properties as needed */
}

You can also use class names on your links to target specific elements.

The above is the detailed content of How to Stop Mobile Safari from Auto-Formatting Phone Numbers?. For more information, please follow other related articles on the PHP Chinese website!