How to Remove Blue Phone Number Links on iOS Devices?

Removing Blue Phone Number Links on iOS Devices

When viewing a webpage on an iPhone, telephone numbers are automatically hyperlinked with a blue color. This can be undesirable in certain situations. Here are two methods to remove this styling:

1. Format-Detection Meta Tag:

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

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

This tag will disable all auto-formatting for telephone numbers. However, it's important to note that if you have any phone numbers that you want visitors to be able to click on, you should manually format them as links.

2. CSS Styling:

If setting a meta tag is not an option, you can use CSS to target phone numbers. Here are two CSS options:

Option 1 (Web Pages):

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

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}

Option 2 (HTML Email Templates):

Wrap phone numbers in link/anchor tags and target their styles with CSS:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
}

By using these methods, you can remove the default blue styling from telephone numbers on iPhone/iOS devices.

The above is the detailed content of How to Remove Blue Phone Number Links on iOS Devices?. For more information, please follow other related articles on the PHP Chinese website!