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

cómo cambiar el número de teléfono de icloud

Question

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

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

<p id="phone-text">Call us on <strong>[phone]</strong></p>

Y no hay hipervínculos, pero iPhone sigue representando 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 procesamiento de HTML móvil

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

Answer 1

Dos opciones…

1. Establezca la metaetiqueta de format-detection .

Para eliminar todo el formateado automático de los números de teléfono, agréguelo al head de su documento html :

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

Ver más teclas de 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:[phone]">1-555-555-5555</a>

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

Cuando no puede establecer una metaetiqueta, como en html email-wrap números de enlace / etiquetas de anclaje ( <a href=""></a> ) y luego apunte sus estilos usando css similar al siguiente y ajuste 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 orientar enlaces específicos, utilice clases en sus enlaces y luego actualice el selector css anterior a a[x-apple-data-detectors].class-name .

Alternativamente, puede orientar enlaces con valores href empezando por tel utilizando este selector css:

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

Answer 2

El truco simple funcionó para mí, agregando un objeto escondido 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.

Answer 3

En Joomla Yootheme funciona para mí:

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

Answer 4

En caso de que las personas encuentren esta pregunta en Google, todo lo que tiene que 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>[phone]</strong></p>

tu css

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

Answer 5

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

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>[phone]</strong></p>

Answer 6

Esto lo hizo por mí:

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

Puedes encontrar más información here .

Answer 7

He estado yendo y viniendo entre

1.

 <a href="tel:[phone]">

2.

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

Intentando hacer que el mismo código funcione para computadoras de escritorio y iPhone. El problema es que si se usa la primera opción y se hace clic desde un navegador de escritorio, aparece un mensaje de error y, si se utiliza el segundo, se desactiva la funcionalidad de tab-to-call en el iPhone iOS5.

Así que lo intenté y lo intenté, y resultó que iPhone trata el número de teléfono como un tipo especial de enlace que puede formatearse con CSS como uno solo. Envolví el número en una etiqueta de dirección (funcionaría con cualquier otra etiqueta HTML, simplemente intenté evitar la etiqueta <a> ) 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 de llamada / cancelación que aparecía en la pestaña y sin el color azul predeterminado y el subrayado.

Solo tenga cuidado con las reglas css aplicadas al número, especialmente cuando usa relleno / margen.

Answer 8

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

de esto: -

a esto: –

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

Answer 9

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

Answer 10

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

Answer 11

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:[phone]">555 123-1234</a>

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

Answer 12

Si desea conservar la función del número de teléfono, pero simplemente elimine el subrayado para fines de visualización, puede darle un estilo al 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 / ID a los enlaces para los que desea tener un estilo diferente.

Alternativamente, puedes darle un estilo al enlace usando:

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

Que se entiende por iPhone, y no se aplicará (hasta donde yo sé, tal vez Android, Blackberry, etc. usuarios / desarrolladores pueden comentar) por cualquier otro UA.

Answer 13

Si no tiene la intención de tener ningún número de teléfono en su página, entonces <meta name="format-detection" content="telephone=no"> funcionará bien. Pero hablando retóricamente, ¿qué pasa si pretendes utilizar una combinación de números telefónicos y no telefónicos?

Suponiendo que solo está codificando números en su código HTML, los "hackers" en el medio de sus dígitos funcionarán. Pero son de poca 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 las convirtiera en enlaces de números telefónicos. Afortunadamente, todo lo que tuve que hacer fue usar PHP number_format() alrededor de la salida de la matriz para insertar comas de "miles":

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

Este formato fue suficiente para convencer a Mobile Safari de que había un propósito algo más específico para el número, por lo que ya no dejé mis números más grandes en enlaces telefónicos. Lo mismo sucedería con la sugerencia de @davidcondrey de utilizar <a href="tel:[phone]">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 se basan en el marcado semántico, tengo la intención de utilizarlo tanto como pueda.

Answer 14

Si simplemente desea evitar que los números de teléfono sean enlaces intente con la etiqueta de fuente:

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

Answer 15

Solo para elaborar sobre 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 ...

Answer 16

Una vieja pregunta pero como ninguna de las respuestas anteriores fueron buenas para mí, publico cómo la resolví

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

<li class="phone_menu">[phone]</li>

css:

.phone_menu{
color:orange;
}

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

.phone_menu a{
color:orange;
}

Answer 17

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

Usé la meta-etiqueta:

<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 tel-links relevantes.

Answer 18

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

Para solucionarlo, intente agregar esto a su hoja de estilo: a[href^=tel] { color: inherit; text-decoration: none; } 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 marcas adicionales.

Answer 19

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

1-800-123-4567
<a href="tel:[phone]">1-800-123-4567</a>

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

Puede renunciar a la metaetiqueta en conjunto y usar una mezcla tal como

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

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

Si desea ser extremadamente cauteloso y proteger contra el evento de un número de teléfono que no está formateado adecuadamente con una etiqueta de anclaje de envoltura, puede explorar el DOM y ajustarlo con este script. Ajuste el patrón de reemplazo como lo 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>'');

Answer 20

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