Existe-t-il un moyen de supprimer la couleur d'hyperlien bleu par défaut d'un numéro de téléphone lorsqu'il est affiché sur un iPhone? Vous souhaitez ajouter une balise Mobile Safari ou CSS spécifique?

Je n'ai que cela en place pour le nombre:

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

Et il n'y a pas d'hyperliens, mais l'iPhone affiche toujours ce numéro de texte sous forme d'hyperlien. J'ai ce problème de rendu sur certains de mes sites Web, mais je ne vois pas pourquoi cela se produit.

J'ai lu ce post:

Numéros de rendu HTML pour mobile

Mais est-ce la seule solution possible?

Deux options…

1. Définissez la format-detectionbalise META.

Pour supprimer toute mise en forme automatique des numéros de téléphone, ajoutez ceci au headde votre htmldocument:

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

Afficher plus de clés de balises Meta spécifiques à Apple .

Remarque: Si vous avez des numéros de téléphone sur la page avec ces numéros, vous devez les formater manuellement sous forme de liens:

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

2. Impossible de définir une balise META? Voulez-vous utiliser css?

Deux cssoptions:

Option 1 (meilleure pour les pages Web)

Cibler les liens avec des hrefvaleurs commençant par telen utilisant ce sélecteur d'attribut css:

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

Option 2 (meilleure pour les modèles de courrier électronique html)

Vous pouvez également, lorsque vous ne pouvez pas définir une balise Meta, comme dans les e-mails HTML, envelopper les numéros de téléphone dans des balises de lien / d'ancrage ( <a href=""></a>), puis cibler leurs styles à l'aide de CSS similaires à ce qui suit et ajuster les propriétés spécifiques dont vous avez besoin pour réinitialiser :

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

Si vous souhaitez cibler des liens spécifiques, utilisez des classes sur vos liens, puis mettez à jour le sélecteur css ci-dessus vers a[x-apple-data-detectors].class-name.

Pour développer une suggestion antérieure de David Thomas:

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

L'ajout de cela à votre CSS laisse la fonctionnalité du numéro de téléphone mais supprime le soulignement et correspond à la couleur que vous utilisiez à l'origine.

C'est étrange que je puisse poster ma propre réponse mais je ne peux pas répondre à celle de quelqu'un d'autre ..

Si vous souhaitez conserver la fonction du numéro de téléphone, mais simplement supprimer le soulignement à des fins d'affichage, vous pouvez styliser le lien comme n'importe quel autre:

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

Je n'ai pas vu de documentation suggérant qu'une classe est appliquée aux liens de numéro de téléphone, vous devrez donc ajouter des classes / identifiants aux liens que vous souhaitez avoir un style différent.

Vous pouvez également styliser le lien en utilisant:

a[href^=tel] { /* css */ }

Ce qui est compris par iPhone, et ne sera pas appliqué (pour autant que je sache, peut-être que les utilisateurs / développeurs Android, Blackberry, etc. peuvent commenter) par tout autre UA.

Au cas où les gens trouveraient cette question sur Google, tout ce que vous avez à faire est de traiter le numéro de téléphone comme un lien, car Apple le définira automatiquement comme tel.

votre HTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

votre css

#phone-text a{color:#fff; text-decoration:none;}

Puisque nous utilisons des liens tel: sur un site avec une icône de téléphone allumée: avant que la plupart des solutions publiées ici n'introduisent un autre problème.

J'ai utilisé le méta-tag:

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

Ceci combiné avec la spécification de tel: links sur tout le site où il devrait être lié!

L'utilisation de css n'est vraiment pas une option car elle masque les liens téléphoniques pertinents.

L'astuce simple a fonctionné pour moi, en ajoutant un objet caché au milieu du numéro de téléphone.

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

Cela vous aidera à remplacer la couleur du numéro de téléphone pour IOS.

Une vieille question mais comme aucune des réponses ci-dessus n'était bonne pour moi, je poste comment je l'ai résolue

J'ai un numéro de téléphone dans une liste:

<li class="phone_menu">+555 5 555 55 55</li>

css:

.phone_menu{
  color:orange;
}

Mais sur iPad / iPhone, il était noir, donc je viens de l'ajouter au CSS:

.phone_menu a{
  color:orange;
}

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

Selon Beau Smith de ce sujet: Comment supprimer le style bleu des numéros de téléphone sur iPhone / iOS?

Vous devez appliquer "tel:" dans l'attribut href de votre lien comme ceci:

<a href="tel:5551231234">555 123-1234</a>

Il supprimera tout style supplémentaire et DOM dans la chaîne de numéro de téléphone.

Je fais des allers-retours entre

1.

    <a href="tel:5551231234">

2.

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

Essayer de faire fonctionner le même code pour le bureau et l'iPhone. Le problème était que si la première option est utilisée et que vous cliquez dessus à partir d'un navigateur de bureau, elle donne un message d'erreur, et si la seconde est utilisée, elle désactive la fonctionnalité de tabulation pour appeler sur iPhone iOS5.

J'ai donc essayé et essayé et il s'est avéré que l'iPhone traite le numéro de téléphone comme un type spécial de lien qui peut être formaté avec CSS comme un seul. J'ai enveloppé le numéro dans une balise d'adresse (cela fonctionnerait avec n'importe quelle autre balise HTML, essayez simplement d'éviter la <a>balise) et je l'ai stylé en CSS comme

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

et cela a fonctionné - dans un navigateur de bureau a montré un texte brut et dans un mobile Safari montré comme un lien avec la fenêtre Appel / Annuler apparaissant sur l'onglet et sans la couleur bleue par défaut et le soulignement.

Soyez juste prudent avec les règles CSS appliquées au nombre, en particulier lorsque vous utilisez le remplissage / la marge.

Pas besoin de supprimer la détection de format en utilisant <meta name="format-detection" content="telephone=no">. Essayez d'utiliser le numéro de téléphone dans n'importe quelle balise plutôt que d'ancrer la balise et de le styler en conséquence, par exemple:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Cette balise meta fonctionne dans le navigateur Safari par défaut sur les appareils iOS et ne fonctionnera que pour les numéros de téléphone qui ne sont pas encapsulés dans une liaison téléphonique afin

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

la première ligne ne sera pas formatée en tant que lien si vous spécifiez la métabalise mais la deuxième ligne le sera car elle est enveloppée dans une ancre téléphonique.

Vous pouvez renoncer à la balise META ensemble et utiliser un mixin tel que

a[href^=tel]{
    color:inherit;
    text-decoration:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

pour conserver le style voulu de vos numéros de téléphone, mais vous devez vous assurer de les envelopper dans une ancre téléphonique.

Si vous voulez être extrêmement prudent et vous protéger contre l'événement d'un numéro de téléphone qui n'est pas correctement formaté avec une balise d'ancrage enveloppante, vous pouvez explorer le DOM et ajuster avec ce script. Ajustez le modèle de remplacement comme vous le souhaitez.

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

ou encore mieux sans jQuery

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');

Si vous n'avez pas l'intention d'avoir de numéros de téléphone sur votre page, alors <meta name="format-detection" content="telephone=no"> cela fonctionnera très bien. Mais en termes rhétoriques, que se passe-t-il si vous avez l'intention d'utiliser un mélange de numéros de téléphone et d'autres numéros?

En supposant que vous ne codiez que des nombres en dur dans votre code HTML, les hacks "insérer des trucs au milieu de vos chiffres" fonctionneront. Mais elles sont peu ou pas utiles pour les pages dynamiques, comme l'utilisation de PHP pour sortir des données numériques à partir d'une requête.

À titre d'exemple, je générais une liste des populations des villes. Certaines populations étaient suffisamment importantes pour que Mobile Safari les transforme en liens de numéros de téléphone. Heureusement, tout ce que j'avais à faire était d'utiliser PHP number_format()autour de la sortie du tableau pour insérer des "milliers" de virgules:

<?php echo number_format($row["population"]) ?>

Cette mise en forme a suffi à convaincre Mobile Safari qu'il y avait un but un peu plus spécifique pour le numéro, donc il n'a plus par défaut mes plus gros numéros dans les liaisons téléphoniques. Il en irait de même pour la suggestion de @davidcondrey d'utiliser <a href="tel:18001234567">1-800-123-4567</a>pour spécifier un but au numéro.

En fin de compte, Safari Mobile fait apparemment attention à la sémantique. Étant donné que HTML5 est construit autour du balisage sémantique et que les moteurs de recherche s'appuient sur le balisage sémantique, j'ai l'intention de l'utiliser autant que possible.

Mettre le numéro dans un <fieldset> empêchera iOS de convertir le numéro en lien pour une raison quelconque. Dans certains cas, cela pourrait être la bonne solution. Je ne préconise pas une désactivation générale de la conversion en liens.

iOS rend les numéros de téléphone cliquables par défaut (pour des raisons évidentes). Bien sûr, cela ajoute une balise supplémentaire qui remplace votre style si votre numéro de téléphone n'est pas déjà un lien.

Pour le corriger, essayez d'ajouter ceci à votre feuille de style: a[href^=tel] { color: inherit; text-decoration: none; }

Cela devrait garder vos numéros de téléphone comme vous le souhaitez sans ajouter de balisage supplémentaire.

Essayez d'utiliser le caractère ASCII pour le tiret entre les séparations de chiffres.

de cela: -

pour ça: –

ex: change 555-555-5555=>555–555–5555

Cela l'a fait pour moi:

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

Vous pouvez trouver plus d'informations ici .

Dans Joomla Yootheme travaille pour moi:

a:not([class]) {
    color: #fff !important;
}

Cet attribut x-ms-format-detection = "none" gère le format du téléphone.

https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

<p id="phone-text" x-ms-format-detection="none"  >Call us on <strong>+44 (0)20 7194 8000</strong></p>

Si vous voulez simplement éviter que les numéros de téléphone soient des liens, essayez d'utiliser la balise de police:

<p>800<font>-</font>555<font>-<font>1212</p>