How to Stop iPhone from Auto-Formatting Phone Numbers as Blue Hyperlinks?

Modifying the Styling of Telephone Numbers on iPhone/iOS

iPhone/iOS devices automatically render telephone numbers as blue hyperlinks. While this feature can be convenient for users, it may not align with your website's design aesthetic. The following solutions address this issue:

1. Removing Auto-Formatting with Meta Tag:

To completely remove the blue hyperlinking from telephone numbers, add the following meta tag to the section of your HTML document:

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

This meta tag disables all auto-formatting for telephone numbers, including the blue hyperlink styling.

2. CSS Styling for Telephone Numbers:

If setting a meta tag is not feasible, you can use CSS to modify the style of telephone numbers. Two options are available:

Option 1 (Preferred for Web Pages):

Target links with href values starting with "tel" using the CSS attribute selector:

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

Option 2 (Suitable for HTML Email Templates):

Wrap telephone numbers in link/anchor tags and target their styles using the following CSS, adjusting the properties as needed:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

Additional Notes:

• If you have telephone numbers that you want to preserve as clickable links, manually format them as links using the href="tel: attribute.
• The x-apple-data-detectors attribute is specific to iOS and can be used to target elements that have been auto-detected as detectible content (including telephone numbers).

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