226 votes

supprimer le style des numéros de téléphone

Est-il un moyen de supprimer la valeur par défaut bleu couleur de lien hypertexte à partir d'un numéro de téléphone lors de l'affichage sur un iPhone? Un Mobile Safari tag ou CSS à ajouter?

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 de liens hypertexte, mais l'iPhone encore rend ce numéro d'un texte en tant que lien hypertexte. J'ai ce problème de rendu sur certains de mes sites web, mais ne peut pas voir pourquoi cela se produit.

J'ai lu ce post:

Mobile de rendu HTML numéros

Mais est-ce la seule solution possible?

454voto

Beau Smith Points 8112

Pour supprimer tous les auto-mise en forme des numéros de téléphone, ajoutez à cela l' head de votre html document.

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

Voir plus d' Apple Spécifique à la Balise Meta Clés.

Si vous avez des numéros de téléphone sur la page avec ces numéros, vous devez manuellement format comme des liens:

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

169voto

Silverback Points 726

Juste pour élaborer une proposition antérieure par David Thomas:

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

En ajoutant ceci à votre css les feuilles de la fonctionnalité du numéro de téléphone, mais les bandes de le souligner et correspond à la couleur que vous utilisiez à l'origine.

Étrange que je peux poster mon propre réponse, mais je ne peux pas répondre à quelqu'un d'autre..

30voto

David Thomas Points 111253

Si vous souhaitez conserver la fonction de téléphone, numéro, mais juste enlever le soulignement des fins d'affichage, vous pouvez définir le style du lien que les autres:

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

Je n'ai pas vu de la documentation qui suggèrent une classe est appliquée pour le numéro de téléphone des liens, de sorte que vous aurez à ajouter des classes/id de liens que vous voulez avoir un style différent.

Alternativement, vous pouvez définir le style du lien à l'aide de:

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

Ce qui est entendu par l'iPhone, et ne sera pas appliqué (pour autant que je sais, peut-être, Android, Blackberry, etc. les utilisateurs/développeurs peuvent faire des commentaires) par tout autre UC.

15voto

sammi Points 43

Dans le cas de personnes trouvent cette question sur Google, tout ce que vous devez faire est de traiter le numéro de téléphone aussi un lien d'Apple sera automatiquement défini comme un.

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

12voto

Valross.nu Points 161

Depuis que nous utilisons tél: liens sur un site avec un téléphone-icône :avant de la plupart des solutions posté ici introduit un autre problème.

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

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

Ceci, combiné avec la spécification tél.: des liens à l'échelle du site où il devrait être lié!

À l'aide de css est vraiment pas une option, car elle se cache pertinent tel-liens.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X