Desativando a Formatação Automática de Números no Edge
Resumo Rápido
Para desativar a formatação automática de números de telefone no Microsoft Edge, basta adicionar uma meta tag com o atributo format-detection e definir seu valor como no. Insira esta linha no <head> do seu documento HTML:
<meta name="format-detection" content="telephone=no">Se você quiser aplicar esta configuração especificamente para o Microsoft Edge, deve usar x-ms-format-detection:
<meta http-equiv="x-ms-format-detection" content="none">Essa tag informará ao Microsoft Edge que você não deseja que ele formate números de telefone.
Como Formatar Seus Números Mantendo a Usabilidade
Estilos CSS Personalizados
Para fazer sua página ignorar os estilos embutidos de números de telefone do Microsoft Edge, você pode definir seus próprios estilos CSS da seguinte maneira:
a[href^="tel"] {
color: inherit; /* A cor deve combinar com o restante do texto */
text-decoration: none; /* Remove sublinhados indesejados */
pointer-events: none; /* Desabilita cliques */
}Preservando a Funcionalidade "Clique para Ligar"
Se for importante preservar a funcionalidade de "clique para ligar", você pode alcançar isso aplicando a seguinte regra CSS:
a[href^="tel"] {
cursor: pointer; /* Indicação visual de interatividade */
pointer-events: auto; /* O elemento permanece ativo para cliques */
}Trica Inteligente com HTML
Para impedir que o Edge reconheça o número de telefone, você pode usar uma trique de HTML. Inserir caracteres invisíveis pode ser muito útil:
123​456​7890 // Edge, o que você acha desses números? Tente decifrá-los!Visualização
Você pode imaginar como o Edge sobrepõe tags indesejadas ao seu novo celular elegante:
Antes: 📱 [*Seu* celular sem elementos externos]
Estilo do Edge: 📱🏷️ [*Seu* celular agora com uma etiqueta intrusiva]O seguinte trecho de CSS ajudará a remover os "aprimoramentos" do Microsoft:
a[href^="tel"] {
/* Rejeitando o estilo padrão do Edge */
color: inherit; /* Revertendo para a cor original */
text-decoration: none; /* Sem sublinhados */
pointer-events: none; /* Bloqueando cliques */
}Isso pode ser comparado à mágica que apaga adesivos desnecessários:
Depois: 📱✨ [Aqui está seu celular elegante em estado impecável!]Problemas e Soluções Potenciais
Possíveis Problemas com JavaScript
Para tarefas complexas, pode ser necessário usar JavaScript para alterar o conteúdo dinamicamente. No entanto, isso pode aumentar o tempo de carregamento da página e afetar negativamente a experiência do usuário.
Atenção Suave à Experiência do Usuário
Desabilitar a formatação de números de telefone pode impedir que os usuários iniciem chamadas diretamente do seu site. É importante encontrar um equilíbrio entre design e conveniência do usuário.
Cuidado ao Copiar Código
Para evitar estilos padrão, a tentação de copiar código de várias fontes pode ser significativa. No entanto, isso pode levar a consequências imprevisíveis.
Recursos Úteis
- O Estado Atual dos Links Telefônicos | CSS-Tricks
- <a>: O Elemento Âncora - HTML: Linguagem de Marcação de Hipertexto | MDN
- Projetando Sites para iPhone X | WebKit
- Posso usar... Tabelas de Suporte HTML5, CSS3 e mais
- Padrão HTML
- Atributo a href do HTML
- Blog dos Desenvolvedores Android: Execução em Segundo Plano Moderna no Android