Maison >interface Web >tutoriel CSS >Comment empêcher l'iPhone de formater automatiquement les numéros de téléphone en tant que liens hypertextes bleus ?

Comment empêcher l'iPhone de formater automatiquement les numéros de téléphone en tant que liens hypertextes bleus ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-15 04:20:02461parcourir

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

Modification du style des numéros de téléphone sur iPhone/iOS

Les appareils iPhone/iOS affichent automatiquement les numéros de téléphone sous forme d'hyperliens bleus. Bien que cette fonctionnalité puisse être pratique pour les utilisateurs, elle peut ne pas correspondre à l'esthétique de la conception de votre site Web. Les solutions suivantes résolvent ce problème :

1. Suppression du formatage automatique avec la balise méta :

Pour supprimer complètement les hyperliens bleus des numéros de téléphone, ajoutez la balise méta suivante au champ de votre document HTML :

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

Cette balise méta désactive tout formatage automatique des numéros de téléphone, y compris le style du lien hypertexte bleu.

2. Style CSS pour les numéros de téléphone :

Si la définition d'une balise méta n'est pas réalisable, vous pouvez utiliser CSS pour modifier le style des numéros de téléphone. Deux options sont disponibles :

Option 1 (préférée pour les pages Web) :

Ciblez les liens avec des valeurs href commençant par "tel" à l'aide du sélecteur d'attribut CSS :

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

Option 2 (convient aux e-mails HTML Modèles) :

Enveloppez les numéros de téléphone dans des balises de lien/ancre et ciblez leurs styles à l'aide du CSS suivant, en ajustant les propriétés si nécessaire :

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;
}

Remarques supplémentaires :

  • Si vous avez des numéros de téléphone que vous souhaitez conserver sous forme de liens cliquables, formatez-les manuellement sous forme de liens à l'aide de l'option href="tel:attribut.
  • L'attribut x-apple-data-detectors est spécifique à iOS et peut être utilisé pour cibler des éléments qui ont été automatiquement détectés comme contenu détectable (y compris les numéros de téléphone).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn