Como desativar a vinculação de número de telefone no Mobile Safari?

O Safari no iPhone cria automaticamente links para cadeias de dígitos que aparecem nos números de telefone. Estou escrevendo uma página da Web contendo um endereço IP e o Safari está transformando isso em um link de número de telefone. É possível desativar esse comportamento para uma página inteira ou um elemento em uma página?

Parece ser a coisa certa a fazer, de acordo com a Referência HTML do Safari :

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

Se você desabilitar isso, mas ainda desejar links telefônicos, ainda poderá usar o esquema de URI "tel".

Aqui está a página relevante na Biblioteca do desenvolvedor da Apple.

Para desativar a aparência de análise do telefone para elementos específicos, este CSS parece fazer o truque:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

A primeira regra desativa o clique, a segunda cuida do estilo.

Eu uso um marceneiro de largura zero ‍

Basta colocar isso em algum lugar do número de telefone e funciona para mim. Testado no BrowserStack (e Litmus para e-mails).

Eu estava tendo o mesmo problema. Encontrei uma propriedade no UIWebView que permite desativar os detectores de dados.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

Adicione isso, acho que é o que você está procurando:

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

Solução para Webview!

Para aplicativos PhoneGap-iPhone / PhoneGap-iOS, você pode desativar a detecção de número de telefone adicionando o seguinte ao delegado de aplicativo do seu projeto:

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

fonte: Desativar detecção de telefone no PhoneGap-iOS .

Para desativar a detecção de número de telefone em parte de uma página, coloque o texto afetado em uma marca de âncora com href = "#". Se você fizer isso, o Safari móvel e o UIWebView devem deixá-lo em paz.

<a href="#"> 1234567 </a>

Acho que encontrei uma solução: coloque o número dentro de um <label>elemento. Não tentei outras tags, mas a <div>deixei ativa na tela inicial, mesmo com otelephone=no atributo

Parece óbvio, nos comentários anteriores, que a metatag funcionou, mas por algum motivo foi interrompida nas versões posteriores do iOS, pelo menos sob algumas condições. Estou executando o 4.0.1.

Você também pode usar o <a>rótulo com javascript: void(0)como hrefvalor.

Exemplo da seguinte maneira:
<a href="javascript: void(0)">+44 456 77 89 87</a>

Eu tive o mesmo problema, mas em um aplicativo da web para iPad.

Infelizmente, nem ...

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

nem ...

0 = 0
9 = 9

... funcionou.

Mas, aqui estão três hacks feios:

• substituindo o número "0" pela letra "O"
• substituindo o número "1" pela letra "l"
• insira uma extensão sem sentido: por exemplo, 555.5<span>5</span>5.5555

Dependendo da fonte usada, os dois primeiros são quase imperceptíveis. Obviamente, o último envolve código supérfluo, mas é invisível para o usuário.

O Kludgy hacks, com certeza, e provavelmente não é viável se você estiver gerando seu código dinamicamente a partir de dados ou se não puder poluir seus dados dessa maneira.

Mas, suficiente em uma pitada.

Eu tinha um ABN (Australian Business Number) que o iPad Safari insistia em transformar em um link de número de telefone. Nenhuma das sugestões ajudou. Minha solução foi colocar tags img entre os números.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

A classe existe apenas para documentar para que servem as tags img.

Funciona no iPad 1 (4.3.1) e iPad 2 (4.3.3).

Minha experiência é a mesma que algumas outras mencionadas. A meta tag ...

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

... funciona quando o site está sendo executado no Mobile Safari (por exemplo, com chrome), mas para de funcionar quando executado como um aplicativo da web (por exemplo, é salvo na tela inicial e é executado sem o chrome).

Minha solução não-ideal é inserir os valores nos campos de entrada ...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

É menos do que o ideal porque, apesar de a borda estar definida como nenhuma, o iOS renderiza uma barra cinza com vários pixels acima do campo. Mas é melhor do que ver o número como um link.

Eu mesmo testei e descobri que funciona, embora certamente não seja uma solução elegante. Inserir um espaço vazio no número de telefone impedirá que os detectores de dados o transformem em um link.

(604) 555<span></span> -4321

<meta name = "format-detection" content = "telephone=no"> não funciona para emails: se o HTML que você está preparando for para um email, o metatag será ignorado.

Se o que você está alvejando são e-mails, aqui está mais uma solução feia, mas funciona para você:

Exemplo de algum HTML que você deseja evitar ser vinculado ou formatado automaticamente:

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

E o CSS que fará a mágica acontecer:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

A desvantagem: você pode precisar de uma consulta de mídia para cada um dos combos retrato / paisagem do ipad / iphone

Você pode tentar codificá-los como entidades HTML:

0 = 0
9 = 9

O mesmo problema no aplicativo Sencha Touch resolvido com a metatag ( <meta name="format-detection" content="telephone=no">) em index.html do aplicativo.

Um truque que uso mais do que apenas o Mobile Safari é usar códigos de escape HTML e uma pequena marcação no número de telefone. Isso torna mais difícil para o navegador "identificar" um número de telefone, ou seja,

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

Também tenho esse problema: o Safari e outros navegadores móveis transformam os IDs de IVA em números de telefone. Então, eu quero um método limpo para evitá-lo em um único elemento, não na página inteira (ou no site).
Estou compartilhando uma possível solução que encontrei, que é subótima, mas ainda é bastante viável: coloquei dentro do número que não quero me tornar um tel:link, a ⁠entidade HTML que é o caractere invisível do Word-Joiner . Tentei me manter mais semântico (bem, pelo menos uma espécie de) colocando esse caracter em algum sentido, por exemplo, para o ID do IVA, escolhi colocá-lo entre os diferentes grupos de dígitos de acordo com seu formato , para um IVA italiano I escreveu: 0613605⁠048⁠8que é processado em 0613605⁠048⁠8 e não é transformado em um número de telefone.

Outra opção é substituir os hífens no seu número de telefone pelo caractere ‑(U + 2011 'Hífen sem quebra de código Unicode')

Fiquei realmente confuso com isso por um tempo, mas finalmente descobri. Fizemos atualizações em nosso site e alguns números foram convertidos em um link e outros não. Acontece que os números não serão convertidos em um link se estiverem em um <fieldset>. Obviamente, não é a solução certa para a maioria das circunstâncias, mas em algumas será a correta.

Esta resposta supera tudo em 13/06/2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

Altere a cor para o que corresponder ao seu texto, a decoração do texto removerá o sublinhado, os eventos do ponteiro impedirão que ele seja visto como um link em um navegador (o ponteiro não muda para uma mão)

Isso é perfeito para emails em HTML no ios e no navegador.

Por que você deseja remover o link, torna muito fácil ter a opção.

Se você simplesmente deseja remover a edição automática, mas mantenha o link funcionando, basta adicioná-lo ao seu CSS ...

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

Divida o número em blocos de texto separados

301 <div style="display:inline-block">441</div> 3909

Outra solução seria usar uma imagem do número IP