Existe uma maneira de remover a cor azul padrão do hiperlink de um número de telefone quando visualizado em um iPhone? Como uma tag ou CSS específico do Mobile Safari para adicionar?

Eu só tenho isso no lugar para o número:

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

E não há hiperlinks, mas o iPhone ainda renderiza esse número de texto como um hiperlink. Eu tenho esse problema de renderização em alguns dos meus sites, mas não consigo entender por que isso está ocorrendo.

Eu li este post:

Números de renderização HTML para celular

Mas essa é a única solução possível?

Duas opções…

1. Defina a format-detectionmeta tag.

Para remover toda a formatação automática para números de telefone, adicione à headdo seu htmldocumento:

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

Veja mais Chaves de meta tag específicas da Apple .

Nota: Se você tiver números de telefone na página com esses números, deverá formatá-los manualmente como links:

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

2. Não é possível definir uma meta tag? Deseja usar css?

Duas cssopções:

Opção 1 (melhor para páginas da web)

Segmente links com hrefvalores começando com telusando este seletor de atributo css:

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

Opção 2 (melhor para modelos de email em html)

Como alternativa, você pode, quando não pode definir uma metatag, como no email html, agrupar números de telefone em tags de link / âncora ( <a href=""></a>) e, em seguida, direcionar seus estilos usando css semelhantes ao seguinte e ajustar as propriedades específicas que você precisa redefinir :

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

Se você deseja direcionar links específicos, use classes nos seus links e atualize o seletor css acima para a[x-apple-data-detectors].class-name.

Apenas para elaborar uma sugestão anterior de David Thomas:

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

Adicioná-lo ao seu CSS deixa a funcionalidade do número de telefone, mas retira o sublinhado e corresponde à cor que você estava usando originalmente.

Estranho que eu possa postar minha própria resposta, mas não posso responder à de outra pessoa ..

Se você deseja manter a função do número de telefone, mas apenas remover o sublinhado para fins de exibição, é possível estilizar o link como qualquer outro:

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

Não vi documentação que sugira que uma classe seja aplicada aos links de número de telefone; portanto, você precisará adicionar classes / IDs aos links que deseja ter um estilo diferente.

Como alternativa, você pode estilizar o link usando:

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

O que é entendido pelo iPhone e não será aplicado (até onde eu saiba, talvez Android, Blackberry etc. usuários / desenvolvedores possam comentar) por qualquer outro UA.

Caso as pessoas encontrem essa pergunta no Google, tudo o que você precisa fazer é tratar o número de telefone como um link, pois a Apple o definirá automaticamente como um.

seu HTML

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

seu css

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

Como usamos os links tel: em um site com o ícone de telefone ativado: antes que a maioria das soluções postadas aqui introduza outro problema.

Eu usei a metatag:

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

Isso combinado com a especificação de tel: links em todo o site, onde deve ser vinculado!

Usar o css não é realmente uma opção, pois oculta tel-links relevantes.

Um truque simples funcionou para mim, adicionando um objeto oculto no meio do número de telefone.

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

Isso ajudará você a substituir a cor do número de telefone do IOS.

Uma pergunta antiga, mas como nenhuma das respostas acima foi boa para mim, eu posto como resolvi

Eu tenho um número de telefone em uma lista:

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

css:

.phone_menu{
  color:orange;
}

Mas no iPad / iPhone era preto, então acabei de adicionar isso ao css:

.phone_menu a{
  color:orange;
}

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

De acordo com Beau Smith sobre este assunto: Como faço para remover o estilo azul dos números de telefone no iPhone / iOS?

Você deve aplicar "tel:" no atributo href do seu link como este:

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

Ele removerá qualquer estilo adicional e DOM da string do número de telefone.

Eu estive indo e voltando entre

1

    <a href="tel:5551231234">

2)

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

Tentando fazer o mesmo código funcionar para desktop e iPhone. O problema era que, se a primeira opção é usada e você a clica em um navegador de desktop, ela gera uma mensagem de erro e, se a segunda é usada, desativa a funcionalidade de aba para chamada no iPhone iOS5.

Então, tentei e tentei, e o iPhone trata o número de telefone como um tipo especial de link que pode ser formatado com CSS como um. Embrulhei o número em uma tag de endereço (funcionaria com qualquer outra tag HTML, tente evitar a <a>tag) e denominei-o em CSS como

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

e funcionou - em um navegador de desktop mostrou um texto sem formatação e em um Safari móvel mostrado como um link com a janela Chamar / Cancelar aparecendo na guia e sem a cor azul padrão e sublinhado.

Apenas tome cuidado com as regras css aplicadas ao número, especialmente ao usar preenchimento / margem.

Não há necessidade de remover a detecção de formato usando <meta name="format-detection" content="telephone=no">. Tente usar o número de telefone em qualquer tag em vez de ancorar a tag e estilizá-la adequadamente, por exemplo:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Essa metatag funciona no navegador Safari padrão em dispositivos iOS e funciona apenas para números de telefone que não estão agrupados em um link telefônico.

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

a primeira linha não será formatada como um link se você especificar o metatag, mas a segunda linha será porque está enrolada em uma âncora de telefone.

Você pode renunciar ao metatag em conjunto e usar um mixin como

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

para manter o estilo pretendido dos seus números de telefone, mas certifique-se de envolvê-los em uma âncora de telefone.

Se você deseja ser mais cauteloso e se proteger contra o evento de um número de telefone que não esteja formatado corretamente com uma etiqueta de âncora de empacotamento, você pode percorrer o DOM e ajustar com este script. Ajuste o padrão de substituição conforme desejado.

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

ou ainda melhor sem 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>');

Se você não pretende ter números de telefone em sua página, <meta name="format-detection" content="telephone=no"> funcionará perfeitamente. Mas retoricamente falando, e se você pretende usar uma mistura de números de telefone e outros que não são de telefone?

Supondo que você esteja apenas codificando números no seu HTML, os hacks "inserir coisas no meio dos dígitos" funcionarão. Mas eles são de pouca ou nenhuma utilidade para páginas dinâmicas, como o PHP para gerar dados numéricos de uma consulta.

Como exemplo, eu estava gerando uma lista de populações da cidade. Algumas populações eram grandes o suficiente para fazer com que o Mobile Safari os transformasse em links de números de telefone. Felizmente, tudo o que eu precisava fazer era usar o PHP number_format()na saída do array para inserir vírgulas "milhares":

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

Essa formatação foi suficiente para convencer o Mobile Safari de que havia um objetivo um pouco mais específico para o número, por isso não padronizou mais meus números maiores em links telefônicos. O mesmo se aplica à sugestão de @davidcondrey de usar <a href="tel:18001234567">1-800-123-4567</a>para especificar uma finalidade para o número.

Resumindo, o Safari Mobile aparentemente presta atenção à semântica. Como o HTML5 é construído em torno da marcação semântica e os mecanismos de pesquisa contam com a marcação semântica, pretendo usá-lo o máximo possível.

Colocar o número em um <fieldset> impedirá o iOS de converter o número em um link por algum motivo. Em alguns casos, essa pode ser a solução certa. Não defendo uma desativação geral da conversão em links.

O iOS torna os números de telefone clicáveis ​​por padrão (por razões óbvias). Obviamente, isso adiciona uma tag extra que substitui seu estilo se o seu número de telefone ainda não for um link.

Para corrigi-lo, tente adicionar isso à sua folha de estilo: a[href^=tel] { color: inherit; text-decoration: none; }

Isso deve manter seus números de telefone como você espera, sem adicionar marcações extras.

Tente usar o caractere ASCII do traço entre as separações de dígitos.

disso: -

para isso: –

ex: mudança 555-555-5555=>555–555–5555

Isso fez por mim:

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

Você pode encontrar mais informações aqui .

No Joomla Yootheme trabalha para mim:

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

Esse atributo x-ms-format-detection = "none" manipula o formato do telefone.

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>

Se você simplesmente deseja evitar que os números de telefone sejam links, tente usar a tag font:

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