¿Hay alguna forma de eliminar el color de hipervínculo azul predeterminado de un número de teléfono cuando se ve en un iPhone? ¿Quieres agregar una etiqueta específica de Mobile Safari o CSS?

Solo tengo esto en su lugar para el número:

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

Y no hay hipervínculos, pero el iPhone aún representa este número de texto como un hipervínculo. Tengo este problema de representación en algunos de mis sitios web, pero no puedo ver por qué ocurre esto.

Leí esta publicación:

Números de representación HTML móvil

¿Pero es esa la única solución posible?

Dos opciones…

1. Establezca la format-detectionmetaetiqueta.

Para eliminar todo el formato automático de números de teléfono, añadir esto a la headde su htmldocumento:

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

Ver más Teclas metaetiquetas específicas de Apple .

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

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

2. ¿No se puede establecer una metaetiqueta? ¿Quieres usar css?

Dos cssopciones:

Opción 1 (mejor para páginas web)

Enlaces de destino con hrefvalores que comienzan telusando este selector de atributos css:

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

Opción 2 (mejor para plantillas de correo electrónico html)

Alternativamente, puede, cuando no puede establecer una metaetiqueta, como en el correo electrónico html, ajustar los números de teléfono en etiquetas de enlace / anclaje ( <a href=""></a>) y luego orientar sus estilos usando CSS similar al siguiente y ajustar las propiedades específicas que necesita restablecer :

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

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 elimina 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 función del número de teléfono, pero simplemente elimina el subrayado para mostrar, 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 documentación que sugiera que se aplique una clase a los enlaces del número de teléfono, por lo que tendrá que agregar clases / identificadores a los enlaces que desea que tengan un estilo diferente.

Alternativamente, puede diseñar el enlace usando:

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

Lo que entiende el iPhone y no se aplicará (hasta donde yo sé, tal vez los usuarios / desarrolladores de Android, Blackberry, etc. puedan comentarlo) por cualquier otra UA.

En caso de que la gente encuentre esta pregunta en Google, todo lo que necesita hacer es tratar el número de teléfono como un enlace, ya que Apple lo configurará automáticamente como uno.

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

Dado que usamos tel: links en un sitio con un icono de teléfono encendido: antes de que la mayoría de las soluciones publicadas aquí presenten otro problema.

Usé la metaetiqueta:

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

¡Esto se combina con la especificación de tel: links en todo el sitio donde debería estar vinculado!

El uso de CSS no es realmente una opción, ya que oculta los enlaces tel relevantes.

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

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

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

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

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

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

css:

.phone_menu{
  color:orange;
}

Pero en iPad / iPhone era negro, así que solo agregué esto al CSS:

.phone_menu a{
  color:orange;
}

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

Según Beau Smith de este tema: ¿Cómo elimino el estilo azul de los números 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.

He estado yendo y viniendo entre

1)

    <a href="tel:5551231234">

2)

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

Intentando que el mismo código funcione para computadoras de escritorio y iPhone. El problema era que si se usa la primera opción y hace clic en ella desde un navegador de escritorio, aparece un mensaje de error, y si se usa la segunda, deshabilita la funcionalidad de tabulación para llamar en el iPhone iOS5.

Así que intenté y probé y resultó que iPhone trata el número de teléfono como un tipo especial de enlace que puede formatearse con CSS como uno. Envolví el número en una etiqueta de dirección (funcionaría con cualquier otra etiqueta HTML, solo intenta evitar la <a>etiqueta) y lo diseñé en CSS como

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

y funcionó: en un navegador de escritorio se mostraba un texto sin formato y en un dispositivo móvil Safari se mostraba como un enlace con la ventana Llamar / Cancelar que aparece en la pestaña y sin el color azul y el subrayado predeterminados.

Solo tenga cuidado con las reglas CSS aplicadas al número, especialmente cuando se utiliza relleno / margen.

No es necesario eliminar la detección de formato mediante el uso <meta name="format-detection" content="telephone=no">. Intente usar el número de teléfono en cualquier etiqueta en lugar de anclar la etiqueta y darle el estilo correspondiente, por ejemplo:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Esta metaetiqueta funciona en el navegador Safari predeterminado en dispositivos iOS y solo funcionará para números de teléfono que no están incluidos en un enlace telefónico, por lo que

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

la primera línea no se formateará como un enlace si especifica la metaetiqueta, pero la segunda línea lo hará porque está envuelta en un ancla de teléfono.

Puede renunciar a la metaetiqueta todo junto y usar un mixin como

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

para mantener el estilo previsto de sus números de teléfono, pero debe asegurarse de envolverlos en un ancla de teléfono.

Si desea ser más cauteloso y protegerse contra el evento de un número de teléfono que no está formateado correctamente con una etiqueta de anclaje envolvente, puede explorar el DOM y ajustarlo con este script. Ajuste el patrón de reemplazo como desee.

$('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>'));

o incluso mejor sin 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 no tiene la intención de tener ningún número de teléfono en su página, <meta name="format-detection" content="telephone=no"> funcionará bien. Pero retóricamente hablando, ¿qué pasa si tiene la intención de usar una combinación de números telefónicos y no telefónicos?

Asumiendo que solo está codificando números en su HTML, los hacks de "insertar cosas en el medio de sus dígitos" funcionarán. Pero son de poca o ninguna utilidad para las páginas dinámicas, como el uso de PHP para generar datos numéricos de una consulta.

Como ejemplo, estaba generando una lista de poblaciones de la ciudad. Algunas de las poblaciones eran lo suficientemente grandes como para hacer que Mobile Safari los convirtiera en enlaces de números de teléfono. Afortunadamente, todo lo que tuve que hacer fue usar PHP number_format()alrededor de la salida de la matriz para insertar comas "miles":

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

Este formato fue suficiente para convencer a Mobile Safari de que había un propósito un poco más específico para el número, por lo que ya no colocaba mis números más grandes en enlaces telefónicos. Lo mismo sería válido para la sugerencia de @davidcondrey de usar <a href="tel:18001234567">1-800-123-4567</a>para especificar un propósito para el número.

La conclusión es que Safari Mobile aparentemente presta atención a la semántica. Dado que HTML5 se basa en el marcado semántico, y los motores de búsqueda confían en el marcado semántico, tengo la intención de usarlo tanto como pueda.

Poner el número en un <fieldset> evitará que iOS convierta el número en un enlace por alguna razón. En algunos casos, esta podría ser la solución correcta. No abogo por una desactivación general de la conversión a enlaces.

iOS hace que se pueda hacer clic en los números de teléfono por defecto (por razones obvias). Por supuesto, eso agrega una etiqueta adicional que anula su estilo si su número de teléfono no es un enlace.

Para solucionarlo, intente agregar esto a su hoja de estilo: a[href^=tel] { color: inherit; text-decoration: none; }

Eso debería mantener sus números de teléfono con el estilo que espera sin agregar un marcado adicional.

Intente usar el carácter ASCII para el guión entre las separaciones de dígitos.

de esto: -

a esto: –

Ej: cambio 555-555-5555=>555–555–5555

Esto lo hizo por mí:

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

Puedes encontrar más información aquí .

En Joomla, Yootheme trabaja para mí:

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

Este atributo x-ms-format-tracking = "none" maneja el formato del teléfono.

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 simplemente quiere evitar que los números de teléfono sean enlaces, intente usar la etiqueta de fuente:

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