ligações telefônicas são uma coisa. Como um link de âncora que você toque (provavelmente) ir para outra página, estes são links que você toque para ligar para um número em um dispositivo capaz de telefone. Já andam por aí há algum tempo. No entanto, causam-me muita confusão. Por exemplo, muitos dispositivos irão reconhecer automaticamente números de telefone e fazer a ligação para nós, mas nem sempre.
há bastante tráfego na web em dispositivos móveis e uma abundância de aplicativos desktops que são capazes de fazer chamadas, que vale a pena saber mais sobre links de telefone.,
Padrão de Uso
temos um trecho de telefone links neste site que foi pendurado em torno desde 2011:
<a href="tel:1-562-867-5309">1-562-867-5309</a>Isso também funciona em links de texto:
<a href="tel:1-562-867-5309">Click to Call!</a>tel: não é tanto um recurso como ele é um protocolo, muito da mesma forma que http: e mailto: são protocolos para o <a> tag de recurso. O spec em si não tem nada a dizer sobre isso, embora o HMTL5 forneceu suporte para os manipuladores de Protocolo personalizados, que permitem que tal protocolo seja usado.,
Você provavelmente está se perguntando Por que tel: pode ser considerado uso padrão na ausência de uma especificação oficial sobre ele. Pode reconhecer-se que se tratava de uma norma proposta já em 2000 e posteriormente adoptada pelo iOS, o que o torna o caminho de facto a percorrer até cerca de 2007. Existem outros protocolos baseados em telefones (que vamos chegar a mais tarde), mas vamos focar em tel: dada a sua relativa proeminência.,
suporte ao navegador
vemos tel: aparecer como manipulador de protocolos para ligações sem documentação oficial; e onde não há documentação, muitas vezes vemos diferenças no suporte e comportamento do navegador. Isso não quer dizer que os navegadores não conseguem reconhecer o ID
tag em si. Em vez disso, os navegadores podem tomar decisões diferentes sobre o que fazer quando esse link é clicado. Por exemplo, um navegador pode assumir que outra aplicação precisa de abrir e irá activar uma janela a perguntar qual a aplicação a usar. Noutros casos, a ligação pode ser completamente ignorada.,
| Browser | Faz um link?,td>Sim | Inicia a chamada de telefone |
|---|---|---|
| iOS | Sim | Dispara opções de chamada, mensagem, copiar ou adicionar o número para o aplicativo de Contatos |
| Ópera (OSX) | Sim | Dispara caixa de diálogo confirmando que o uso de outro aplicativo |
| Ópera (Windows) | Sim | Dispara um diálogo de erro que não reconhece o protocolo |
| Safari | Sim | Inicia o FaceTime |
Estilo de Telefone Links
Estilo números de telefone é como qualquer outro link., Na verdade, ele vai herdar o estilo padrão para âncoras:
digamos que nós apenas estilos para aplicar às ligações telefónicas., Podemos fazer isso com uma pseudo-seletor que procura o tel: texto em um determinado URL:
a { color: orange; text-decoration: none;}Tuts+ tem um bom truque usando o ::before pseudo-seletor para adicionar o unicode telefone personagem antes de o número ser exibida:
a:before { content: "\260e"; margin-right: 0.5em;}de Telefone Alternativos Relacionados com Links
Acredite ou não, tel: não é a única forma de iniciar uma chamada de telefone com um link. Aqui estão alguns outros manipuladores de Protocolo baseados em telefones personalizados à nossa disposição.,
-
callto:exactamente comotel:mas usado para iniciar chamadas através da aplicação Skype. - auto-detectado: muitos navegadores irão detectar automaticamente um número de telefone no HTML e ligá—lo para você-não há necessidade de alterar a marcação. iOS, por exemplo, vai totalmente fazer isso, embora não parecia ser o caso do Chrome em Android.
-
sms:pular a chamada e ir direto para a mensagem de texto. Este parece ser muito menos suportado do quetel:está entre navegadores, incluindo móveis., -
fax:voltar para o futuro com máquinas de fax. Mais uma vez, confiabilidade incerta.
melhores práticas
é meio engraçado falar sobre as melhores práticas quando se trata de algo sem ESPECIFICAÇÕES. O spec dá uma breve opinião sobre a ideia” clique para chamar”, mas aqui estão algumas coisas a ter em mente ao trabalhar com números de telefone e links.
considere o contexto
uma ligação telefónica pode fazer uma excelente chamada-para-acção, especialmente em telefones móveis, onde reduz o atrito entre o conteúdo e a chamada., Ao mesmo tempo, as ligações telefônicas poderiam ser consideradas um obstáculo em uma experiência de desktop onde uma chamada telefônica não seria possível se o dispositivo não tivesse um aplicativo que o suporta.
uma ideia seria criar uma classe especificamente para ligações telefónicas e tentar mostrá-las ou escondê-las com base no que sabemos sobre o navegador. As perguntas da Modernizr e da mídia são úteis aqui, embora totalmente imprecisas.
utilizar códigos de país
não é necessário um código de país, mas pode ser um bom toque para sites com tráfego internacional., Os códigos dos países podem ser precedidos de uma +, mas também não é necessário.
<a href="tel:+01-562-867-5309">1-562-867-5309</a>Otimização de Motor de Busca
especialistas em SEO podem ter mais a acrescentar sobre isso do que eu faço, mas o Google oferece uma estrutura de formato de dados para as empresas locais e usando ele vai fazer de telefone links mais reconhecível aos rastreadores, formatá-los em páginas de resultados de pesquisa de uma maneira que faz com que o número muito mais acionáveis., Duda Andares proporciona um excelente panorama com o exemplo a seguir:
por outro lado, querendo motores de busca seguir ligações por telefone, você pode adicionar rel="nofollow" para desencorajar os links de ser seguido e indexados. Esta pode ser uma boa idéia para qualquer link que não está sendo designado como um chamado à ação, uma vez que web crawlers estaria inclinado a tentar segui-lo para nenhum lugar.,
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>desligar a detecção de números em iOS
se planeia adicionar ligações telefónicas à sua marcação, então Poderá também considerar desactivar os iOS a partir de números de telefone Auto-detectáveis e sobrepor-se aos seus estilos. Adicionar o seguinte documento <head> para desligar isso:
<meta name="format-detection" content="telephone=no">