Dos opciones…

1. Establezca la metalabel de format-detection .

Para eliminar todo el formateo automático de los numbers de teléfono, agregue esto al head de su documento html :

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

Ver más Claves Meta Tag específicos de Apple .

Nota: Si tiene numbers de teléfono en la página con estos numbers, debe formatearlos manualmente como enlaces:

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

2. ¿No se puede establecer una metalabel? ¿Quieres usar CSS ?

Cuando no puede establecer una metalabel, como en el correo electrónico html, envuelva los numbers de teléfono en las tags de enlace / ancla ( <a href=""></a> ) y luego <a href=""></a> sus styles usando css similar a lo siguiente y ajuste las properties específicas que necesita reiniciar:

 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 desea segmentar enlaces específicos, use classs en sus enlaces y luego actualice el selector css anterior a a[x-apple-data-detectors].class-name .

Alternativamente, puede segmentar enlaces con valores href que comienzan con tel mediante el uso de este selector css:

 a[href^="tel"] { /* css propery: value pairs here */ }

Solo para elaborar una sugerencia anterior de David Thomas:

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

Agregar esto a su CSS deja la funcionalidad del número de teléfono, pero desplaza el subrayado y coincide con el color que estaba usando originalmente.

Es extraño que pueda publicar mi propia respuesta, pero no puedo responder a la de otra persona …

Si desea conservar la function del número de teléfono, pero simplemente elimine el subrayado para fines de visualización, puede diseñar el enlace como cualquier otro:

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

No he visto documentation que sugiera que se aplique una class a los enlaces del número de teléfono, por lo que tendrá que agregar classs / ids a los enlaces que desea tener un estilo diferente.

Alternativamente, puede diseñar el enlace usando:

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

Lo que entiende el iPhone, y no se aplicará (por lo que sé, tal vez Android, Blackberry, etc. los usuarios / desarrolladores pueden comentar) por cualquier otra UA.

En caso de que las personas encuentren esta pregunta en Google, lo único que debe hacer es tratar el número de teléfono como un enlace, ya que Apple lo configurará automáticamente.

tu HTML

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

tu css

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

Ya que usamos tel: enlaces en un sitio con un ícono de teléfono: antes de que la mayoría de las soluciones publicadas aquí presenten otro problema.

Utilicé la metalabel:

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

Esto combinado con la especificación de tel: enlaces en todo el sitio donde debería estar vinculado.

Usar CSS realmente no es una opción, ya que oculta los enlaces de teléfono relevantes.

Una vieja pregunta pero como ninguna de las respuestas anteriores fue buena para mí, publiqué cómo la resolví

Tengo un número de teléfono en una list:

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

css:

 .phone_menu{ color:orange; }

Pero en el iPad / iPhone era negro, así que acabo de agregar esto al css:

 .phone_menu a{ color:orange; }

El truco simple funcionó para mí, agregando un object oculto en medio del número de teléfono.

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

Esto te ayudará a anular el color del número de teléfono para IOS.

De acuerdo con Beau Smith de este tema: ¿Cómo elimino el estilo azul de los numbers de teléfono en iPhone / iOS?

Debe aplicar “tel:” en el atributo href de su enlace de esta manera:

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

Eliminará cualquier estilo adicional y DOM a la cadena del número de teléfono.