Phone numbers and email addresses turn blue on an iPhone: how to change the colour

On an iPhone, Safari spots phone numbers in your text and turns them into blue links on its own, even though you didn't link them in EverWeb. That's why they look right on your computer and blue on your phone. The best fix is to make the number a phone link yourself, in your own colours. If you'd rather the iPhone left numbers alone, add one line of code to your website.

Email addresses are different: they're usually blue only when they're already a link. A link's colour comes from your link settings, or from the Visited colour once you've clicked it. See When I changed my link colors, they don't appear changed when publishing.

Fix 1: make the number a link, in your own colours (recommended)

A number people can tap to call is handy on a phone, so keep it tappable and choose its colour.

  1. Double-click the text box and highlight the phone number.
  2. Go to Inspector > Hyperlinks and tick Enable as Hyperlink.
  3. Set Link To to An External Page and type tel: followed by the number with the country code and no spaces, for example tel:+14165550100.
  4. Under Hyperlink Formatting, set the colours. To match the text around it, pick the same colour as the text. In EverWeb 4.6 and later you can choose a Link Style there instead, so every link on your website looks the same.
  5. Publish and check on your iPhone.

Safari leaves numbers you've linked yourself in the colours you chose.

For an email address, do the same with Link To set to An Email Message, then set its colours under Hyperlink Formatting.

In EverWeb 4.6 and later: Insert > Button > Phone Call adds a ready-made call button. Type your number with the country code when asked.

Fix 2: stop the iPhone turning numbers into links

  1. Go to File > Edit Publishing Settings and scroll to Head/Footer Code.
  2. Paste this line into Head Code:
<meta name="format-detection" content="telephone=no">
  1. Choose File > Publish Entire Site, so every page gets the line.
  2. On your iPhone, close the page's tab and open your website again.
  • Only one page: select the page and paste the line into Inspector > Page Settings > Head/Footer Code instead.
  • Street addresses or dates turn blue too: use this line instead:
<meta name="format-detection" content="telephone=no, address=no, date=no, email=no">

After this, numbers you haven't linked are plain text, and visitors can't tap them to call. You can use both fixes together: the line stops Safari adding its own links, and the numbers you link yourself still work, in your colours.

Still blue?

  • Your iPhone is showing a saved copy. Open the website in a private tab. See How to clear your browser cache in Chrome, Safari, Edge and Firefox.
  • It's the Visited colour. Links you've already tapped use the Visited colour. Set it to match, or test on another device.
  • The number is inside a widget or outside code, such as a form or a booking calendar. Its colour comes from that widget's settings or the other company's code. Fix 2 still stops Safari's own links there.

Related articles

  • 0 Utilisateurs l'ont trouvée utile
Cette réponse était-elle pertinente?

Articles connexes

Mon site Web s'affiche mal sur un téléphone : comment fonctionne le mobile dans EverWeb

La solution dépend du type de page que vous avez créé. EverWeb en propose deux. Page...

Dois-je refaire le design de mon site Web EverWeb pour les appareils mobiles ?

Non. Votre site Web EverWeb fonctionne tel quel sur les téléphones et les tablettes. La façon...

Mon site Web s'affiche bien sur mon ordinateur, mais il est coupé ou désordonné sur mon téléphone

La plupart du temps, un ou plusieurs objets de la page sont plus larges que l'écran d'un...

Créer une page adaptative avec des conteneurs pour qu'elle s'empile proprement sur un téléphone

Une page Adaptatif est une seule page qui se réorganise pour s'adapter à tous les écrans. Vous la...

Masquer ou afficher des objets sur les téléphones, les tablettes ou les ordinateurs (Show on Device)

Vous pouvez afficher un objet sur certaines tailles d'écran et le masquer sur d'autres....