Come contrassegnare i numeri di telefono?

Voglio contrassegnare un numero di telefono come link richiamabile in un documento HTML. Ho letto l'approccio dei microformati e so che lo tel:schema sarebbe standard, ma non è praticamente implementato da nessuna parte.

Skype definisce, per quanto ne so, skype:e callto:quest'ultimo ha guadagnato una certa popolarità. Presumo che le altre compagnie abbiano altri schemi o saltino sul callto:treno.

Quale sarebbe la migliore pratica per contrassegnare un numero di telefono, in modo che quante più persone possibili con il software VoIP possano semplicemente fare clic su un collegamento per ricevere una chiamata?

Domanda bonus: qualcuno è a conoscenza di complicazioni con numeri di emergenza come 911 negli Stati Uniti o 110 in Germania?

Saluti,

Aggiornamento: Microsoft NetMeeting accetta callto:schemi in WinXP. Questa domanda suggerisce che Microsoft Office Communicator gestirà gli tel:schemi ma non callto:quelli. Fantastico, Redmond!

Aggiornamento 2: due anni e mezzo dopo ora. Sembra ridursi a quello che vuoi fare con il numero. Nel contesto mobile, tel:è la strada da percorrere. Il targeting per desktop dipende da te, se pensi che i tuoi utenti siano più persone Skype ( callto:) o che molto probabilmente avrà installato qualcosa come Google Voice ( tel:). La mia opinione personale è, in caso di dubbio, usare tel:(in linea con la risposta di @Sidnicious).

Aggiornamento 3: l' utente @ rybo111 ha notato che nel frattempo Skype in Chrome è saltato sul tel:carrozzone. Non posso verificarlo, perché nessuna macchina con entrambi a portata di mano, ma se è vero, significa che finalmente abbiamo un vincitore qui:tel:

Lo tel:schema è stato utilizzato alla fine degli anni '90 e documentato all'inizio del 2000 con RFC 2806 (che è stato obsoleto dalla più completa RFC 3966 nel 2004) e continua a essere migliorato . Il supporto tel:su iPhone non è stata una decisione arbitraria.

callto:, sebbene supportato da Skype, non è uno standard e dovrebbe essere evitato a meno che non sia mirato specificamente agli utenti di Skype.

Me? Comincerei solo a includere tel:URI correttamente formati sulle tue pagine (senza annusare l'agente utente) e aspetterei che il resto dei telefoni del mondo raggiunga :).

Esempio :

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

I miei risultati del test:

chiama a:

• Nokia Browser: non succede nulla
• Google Chrome: chiede di eseguire skype per chiamare il numero
• Firefox: chiede di scegliere un programma per chiamare il numero
• IE: chiede di eseguire skype per chiamare il numero

tel:

• Nokia Browser: funzionante
• Google Chrome: non succede nulla
• Firefox: "Firefox non sa come aprire questo URL"
• IE: impossibile trovare l'URL

La scommessa migliore è iniziare con tel: che funziona su tutti i cellulari

Quindi inserire questo codice, che verrà eseguito solo su un desktop e solo quando si fa clic su un collegamento.

Sto usando http://detectmobilebrowsers.com/ per rilevare i browser mobili, puoi usare qualunque metodo tu preferisca

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

Quindi in pratica copri tutte le tue basi.

tel: funziona su tutti i telefoni per aprire il dialer con il numero

callto: funziona sul tuo computer per connettersi a Skype da Firefox, Chrome

Come ci si aspetterebbe, il supporto di WebKit si tel:estende anche al browser mobile Android - FYI

Conservo questa risposta per scopi "storici" ma non la consiglio più. Vedi la risposta @Sidnicious sopra e il mio aggiornamento 2.

Dal momento che sembra un pareggio tra callto e tel ragazzi, voglio gettare una possibile soluzione nella speranza, che i tuoi commenti mi riportino sulla via della luce ;-)

Usando callto:, poiché la maggior parte dei client desktop lo gestirà:

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

Quindi, se il client è un iPhone, sostituisci i collegamenti:

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:"));
      }
    }
  }
};

Qualche obiezione contro questa soluzione? Dovrei preferibilmente iniziare da tel:?

Safari mobile (iPhone e iPod Touch) utilizza lo tel:schema.

Come faccio a comporre un numero di telefono da una pagina Web su iPhone?

RFC3966 definisce l'URI IETF standard per i numeri di telefono, ovvero l'URI "tel:". Questo è lo standard. Non esiste uno standard simile che specifichi "callto:", ovvero una convenzione particolare per Skype su piattaforme in cui è possibile registrare un gestore URI per supportarlo.

questo ha funzionato per me:

1. creare un collegamento conforme agli standard:

        <a href="tel:1500100900">

2. sostituirlo quando il browser mobile non viene rilevato, per skype:

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

La selezione del collegamento da sostituire tramite la classe sembra più efficiente. Ovviamente funziona solo su ancore con .phoneclasse.

L'ho messo in funzione in if( !isMobile() ) { ...modo che si inneschi solo quando rileva il browser desktop. Ma questo è probabilmente 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 )
    );
}

Ho usato tel:per il mio progetto.

Funzionava con Chrome, Firefox, IE9 e 8, Chrome mobile e il browser mobile sul mio smartphone Sony Ericsson.

Ma callto:non ha funzionato nei browser mobili.

Vorrei usare tel:(come raccomandato). Ma per avere un migliore fallback / non visualizzare le pagine di errore userei qualcosa del genere (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:");
    }
});

Il presupposto è che i browser mobili che hanno un timbro mobile nella stringa UserAgent abbiano il supporto per il tel:protocollo. Per il resto sostituiamo il collegamento con il callto:protocollo per avere un fallback su Skype ove disponibile.

Per eliminare le pagine di errore per i protocolli non supportati, il collegamento è indirizzato a un nuovo iframe nascosto.

Sfortunatamente non sembra possibile verificare se l'URL è stato caricato correttamente nell'iframe. Sembra che non vengano generati eventi di errore.

Poiché callto:per impostazione predefinita è supportato da skype (impostato nelle impostazioni di Skype) e anche altri lo supportano, consiglierei di utilizzare callto:anziché skype:.

Anche se Apple consiglia tel:nei suoi documenti per Mobile Safari, attualmente (iOS 4.3) accetta callto:lo stesso. Quindi consiglio di usarlo callto:su un sito Web generico poiché funziona sia con Skype che con iPhone e mi aspetto che funzioni anche su telefoni Android.

Aggiornamento (giugno 2013)

Si tratta ancora di decidere cosa vuoi che la tua pagina web offra. Sui miei siti web fornisco sia tel:e callto:collegamenti (quest'ultimo etichettato come per Skype) dal browser desktop su Mac non fanno nulla con tel:collegamenti mentre mobile Android non fa nulla con callto:i collegamenti. Anche Google Chrome con il plug-in di Google Talk non risponde ai tel:collegamenti. Tuttavia, preferisco offrire entrambi i collegamenti sul desktop nel caso in cui qualcuno abbia avuto il problema di far funzionare i tel:collegamenti sul proprio computer.

Se il design del sito richiedesse che fornissi un solo link, utilizzerei un tel:link che proverei a cambiare callto:sui browser desktop.

Utilizzando jQuery, sostituire tutti i numeri di telefono degli Stati Uniti sulla pagina con l'appropriato callto:o tel:schemi.

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

Grazie a @jonas_jonas per l'idea. Richiede l'eccellente funzione findAndReplaceDOMText .

Uso il <a href="tel:+123456">12 34 56</a>markup normale e faccio in modo che quei link non siano cliccabili per gli utenti desktop tramitepointer-events: none;

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

per i browser che non supportano gli eventi puntatore (IE <11), il clic può essere impedito con JavaScript (l'esempio si basa su Modernizr e jQuery):

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