Como marcar números de telefone?

Os resultados dos meus testes:

Callto:

• navegador Nokia: nada acontece
• o Google Chrome: pede para executar o skype para ligar para o número
• Firefox: pede para escolher um programa para ligar para o número
• IE: pede para executar o skype para ligar para o número

Tel:

• navegador Nokia: a trabalhar
Google Chrome: nada acontece [[8]}Firefox:"Firefox não sabe como abrir este url"
• IE: não foi possível encontrar url

A melhor aposta é começar pelo tel: que funciona em todos os telemóveis

Em seguida, coloque este código, que só será executado quando em um desktop, e só quando um link é clicado.

Estou a usar http://detectmobilebrowsers.com/ para detectar navegadores móveis, pode usar qualquer método que preferir

if (!jQuery.browser.mobile) {
    jQuery('body').on('click', 'a[href^="tel:"]', function() {
            jQuery(this).attr('href', 
                jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
    });
}

Tel: funciona em todos os telefones para abrir o mostrador com o número

Como seria de esperar, o suporte do WebKit de tel: estende - se ao navegador móvel Android, bem como FYI

mantenho esta resposta para um propósito "histórico", mas não a recomendo mais. Veja a resposta @Sidnicious acima e minha atualização 2.

Usando callto:, uma vez que a maioria dos clientes do ambiente de trabalho irá lidar com isso:

<a href="callto:0123456789">call me</a>

Então, se o cliente é um iPhone, substitua os links:

window.onload = function () {
  if (navigator.userAgent.match (/iPhone/i)) {
    var a = document.getElementsByTagName ("a");
    for (var i = 0; i < a.length; i++) {
      if (a[i].getAttribute ('href').search (/callto:/i) === 0) {
        a[i].setAttribute ('href', a[i].getAttribute ('href').replace (/^callto:/, "tel:"));
      }
    }
  }
};

Mobile Safari (iPhone & iPod Touch) use o esquema tel:.

Como posso marcar um número de telefone a partir de uma página web no iPhone?

RFC3966 define o URI padrão da IETF para números de telefone, ou seja, o 'tel:' URI. É o padrão. Não existe um padrão semelhante que especifique " callto:", que é uma convenção particular para o Skype em plataformas onde é permitido registrar um manipulador URI para apoiá-lo.

1.estabelecer uma ligação conforme com as normas:

        <a href="tel:1500100900">

2.substitui-o quando o navegador móvel não for detectado, para o skype:

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

Seleccionar a ligação a substituir através da classe parece mais eficiente. Claro que só funciona em âncoras com classe .phone.

Coloquei - o na função if( !isMobile() ) { ... por isso só despoleta quando detecta o navegador do ambiente de trabalho. Mas este é provavelmente obsoleto...

function isMobile() {
    return (
        ( navigator.userAgent.indexOf( "iPhone" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPod" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPad" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "Android" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "webOS" ) > -1 )
    );
}

Usei {[[0]} para o meu projecto.

Mas callto: não funcionou nos navegadores móveis.

Embora a Apple recomende {[[0]} nos seus documentos para o Safari móvel, actualmente (iOS 4.3) Aceita callto: a mesma coisa. Então eu recomendo o uso callto: em um site genérico como ele funciona tanto com Skype e iPhone e eu espero que ele irá funcionar em telefones Android, também.

Actualização (Junho De 2013)

Se o design do site ditasse que eu só fornecia um link, eu usaria um link {[[0]} que eu tentaria mudar para callto: em navegadores de desktop.

Eu usaria tel: (como recomendado). Mas para ter um melhor recurso/não mostrar páginas de erro eu usaria algo assim (usando jquery):

// enhance tel-links
$("a[href^='tel:']").each(function() {
    var target = "call-" + this.href.replace(/[^a-z0-9]*/gi, "");
    var link = this;

    // load in iframe to supress potential errors when protocol is not available
    $("body").append("<iframe name=\"" + target + "\" style=\"display: none\"></iframe>");
    link.target = target;

    // replace tel with callto on desktop browsers for skype fallback
    if (!navigator.userAgent.match(/(mobile)/gi)) {
        link.href = link.href.replace(/^tel:/, "callto:");
    }
});

A suposição é que os navegadores móveis que têm um selo móvel na cadeia userAgent têm suporte para o protocolo tel:. Quanto ao resto, substituímos o link com o protocolo callto: para ter um recurso para o Skype quando disponível.

Para suprimir as páginas de erro do(s) protocolo (s) não suportado (s), a ligação é direccionada para um novo iframe escondido.

Infelizmente não parece ser possível verificar, se o url foi carregado com sucesso na iframe. Parece que não houve erros.

Uma vez que callto: é por padrão suportado pelo skype (configurado na configuração do Skype), e outros também o suportam, eu recomendaria o uso de callto: em vez de skype: .

Utilizando jQuery, substitua todos os números de telefone dos EUA na página pelos esquemas apropriados callto: ou tel:.

// create a hidden iframe to receive failed schemes
$('body').append('<iframe name="blackhole" style="display:none"></iframe>');

// decide which scheme to use
var scheme = (navigator.userAgent.match(/mobile/gi) ? 'tel:' : 'callto:');

// replace all on the page
$('article').each(function (i, article) {
    findAndReplaceDOMText(article, {
        find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
        replace:function (portion) {
            var a = document.createElement('a');
            a.className = 'telephone';
            a.href = scheme + portion.text.replace(/\D/g, '');
            a.textContent = portion.text;
            a.target = 'blackhole';
            return a;
        }
    });
});

Uso a marcação normal <a href="tel:+123456">12 34 56</a> e faço com que essas ligações não se tornem clicáveis para os utilizadores do ambiente de trabalho via pointer-events: none;

a[href^="tel:"] {
    text-decoration: none;
}
.no-touch a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
}

Para navegadores que não suportam eventos de ponteiros( IE

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}