How to Stop Phone Numbers Turning Into Hyperlinks on Your iPhone?

How to Prevent Phone Numbers from Appearing as Hyperlinks on iPhone/iOS

When displaying phone numbers on an iPhone, it's often noticed that the blue hyperlink styling is automatically applied, even if there's no actual hyperlink. This behavior can be a bit distracting and may interfere with the appearance of your website.

Solution 1: Using the Format-Detection Meta Tag

To disable the auto-formatting of telephone numbers, the following meta tag can be added to the head of your HTML document:

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

This meta tag instructs the browser to ignore automatic formatting for telephone numbers. However, it's important to note that manually formatting phone numbers as hyperlinks is still necessary if you want clickable numbers.

Solution 2: Using CSS

Option 1 (for web pages)

If you're unable to use meta tags, CSS can be employed to target links with href values starting with tel:

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

This CSS attribute selector targets all hyperlinks that reference telephone numbers and removes the default blue styling.

Option 2 (for HTML email templates)

Another CSS option, especially useful when working with HTML email templates, involves wrapping phone numbers in anchor tags:

<a href="" x-apple-data-detectors>+44 (0)20 7194 8000</a>

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

This method relies on a specific attribute (x-apple-data-detectors) to target phone numbers and reset their styling. If desired, classes can be assigned to specific links and the CSS selector can be updated accordingly.

The above is the detailed content of How to Stop Phone Numbers Turning Into Hyperlinks on Your iPhone?. For more information, please follow other related articles on the PHP Chinese website!