Comment empêcher Mobile Safari de formater automatiquement les numéros de téléphone ?

Style des numéros de téléphone dans Mobile Safari

Lors de l'affichage d'un numéro de téléphone sur un iPhone à l'aide de Mobile Safari, il est frustrant de rencontrer le lien hypertexte bleu par défaut style. Cela peut créer des incohérences de formatage indésirables et perturber l’expérience utilisateur. Si vous rencontrez ce problème sur votre site Web, plusieurs solutions sont disponibles pour supprimer le style bleu.

1. Désactivez le formatage automatique à l'aide de la balise méta :

Ajoutez cette balise méta à l'en-tête de votre document HTML :

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

Cette balise méta indique à Mobile Safari de ne pas formater automatiquement les numéros de téléphone. , vous permettant de contrôler leur style manuellement.

Remarque : Si vous avez des numéros de téléphone sur la page qui devraient être cliquables, vous devez pour les formater manuellement sous forme de liens à l'aide de la balise 'a' :

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2. Supprimer le style à l'aide de CSS :

Option 1 :

Cibler les liens avec des valeurs href commençant par 'tel' :

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

Option 2 :

Pour les situations où vous ne pouvez pas utiliser de balise méta, comme dans les modèles d'e-mail HTML, enveloppez les numéros de téléphone dans des balises d'ancrage et ciblez leurs styles à l'aide de CSS :

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

Vous pouvez également utiliser des noms de classe sur vos liens pour cibler des éléments spécifiques.

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!