¿Cómo elimino el estilo azul de los números de teléfono en iPhone / iOS?


198

¿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?


No estoy completamente seguro de si esto es lo mismo, ¿puede verificar por favor? stackoverflow.com/questions/3712475/…
Pekka

3
@Pekka: Creo que esta pregunta es similar pero distinta. Se trataba de evitar que algo se interprete erróneamente como un número de teléfono. Parece que se trata de evitar que los números de teléfono reales alteren su diseño.
Chuck

Respuestas:


419

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.


Hola Beausmith, gracias por tu respuesta. Terminé usando su primera solución al final hace un tiempo ... solo me preguntaba si había otra solución al problema.
Reno

1
@Beau Smith, eso también funcionó para mí, pero no en el Safari de iPod 1st Generation. ¿Hay alguna etiqueta específica para ese navegador antiguo?
Lado Lomidze

12
45 respuestas y todavía no han hecho que la solución? :)
kaleazy

Esta es la respuesta. Tenía una página de contacto que los números no aparecerían en iPads y iPhones. Esto hizo el truco, ¡gracias!
tahdhaze09

1
RE utiliza enlaces 'tel:' para marcar números de teléfono: también se ha sugerido utilizar microformatos como alternativa ( ux.stackexchange.com/a/21121/36009 ).
David Cook el

163

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 ...


1
Esta es la mejor solución PERO debería ser así, creo: a [href ^ = "tel"] {color: heredar; decoración de texto: ninguno; } Al menos eso fue lo que funcionó para mí. Necesita las comillas dobles ("") como se menciona aquí: stackoverflow.com/questions/3859101/what-does-ahref-do-in-css
Panagiotis Palladinos

He agregado las citas. Si bien puede funcionar sin usar comillas, las especificaciones CSS sí las requieren para las cadenas. Gracias Panagiotis
Silverback

¡Gracias! Esto me ha estado volviendo loco. La mejor respuesta para conservar la funcionalidad también (¡y probablemente debería ser la respuesta reconocida!)
Rexxo

28

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.


66
Probablemente sea una buena idea usarlo a[href^=tel:]para que no coincida accidentalmente con hrefs, telephone.htmletc.
Mattias Wadman

1
@MattiasWadman su sugerencia no funcionó para mí en Chrome o Safari móvil.
cfx

13

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

Esto es lo que estaba buscando, todos los comentarios principales no mencionan esto explícitamente.
n8win

10

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.


1
¡Gracias por esto! Funciona perfecto en Cordova / Ionic.
TechnoTim

6

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.


Funciona, pero rompe la funcionalidad del enlace. Para necesitar cosas en un apuro (como hoy) está bien.
karolus

1
Su ejemplo no funcionó para mí, pero carpintero de ancho cero & zwj; Hizo el truco.
Der_Meister

5

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

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


2

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.


2

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


1

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

1

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.


1

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.


1

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.


0

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

de esto: -

a esto: &ndash;

Ej: cambio 555-555-5555=>555&ndash;555&ndash;5555


0

Esto lo hizo por mí:

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

Puedes encontrar más información aquí .


0

En Joomla, Yootheme trabaja para mí:

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


-2

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.