Comment marquer des numéros de téléphone?

mes résultats d'essai:

callto:

• Nokia Navigateur: rien ne se passe
• Google Chrome: Demande à exécuter skype pour appeler le numéro
• Firefox: demande de choisir un programme pour appeler le numéro
• IE: demande à exécuter skype pour appeler le numéro

tél:

• Nokia Navigateur: travail
• Google Chrome: rien ne se passe
• Firefox: "Firefox ne sait pas comment ouvrir cette url "
• IE: ne pouvait pas trouver url

le meilleur pari est de commencer avec tel: qui fonctionne sur tous les mobiles

alors mettez ce code, qui ne s'exécute que sur un bureau, et seulement lorsqu'un lien est cliqué.

j'utilise http://detectmobilebrowsers.com / pour détecter les navigateurs mobiles, vous pouvez utiliser quelle que soit la méthode que vous préférez

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

donc vous couvrez toutes vos bases.

tél: fonctionne sur tous les téléphones pour ouvrir le compteur avec le numéro

callto: fonctionne sur votre ordinateur pour se connecter à skype à partir de firefox, chrome

comme on pouvait s'y attendre, la prise en charge de tel: par WebKit s'étend également au navigateur mobile Android - FYI

je garde cette réponse pour un but "historique" mais je ne la recommande plus. Voir la réponse de @Sidnicious ci-dessus et ma mise à jour 2.

Puisqu'il ressemble à un match nul entre callto et tel gars, je veux jeter dans une solution possible dans l'espoir, que vos commentaires me ramèneront sur le chemin de la lumière; -)

en utilisant callto: , puisque la plupart des clients de bureau vont s'en charger:

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

alors, si le client est un iPhone, remplacer les liens:

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

des objections contre cette solution? Dois-je commencer de préférence par tel: ?

Safari Mobile (iPhone & iPod Touch) utilisez le schéma tel: .

Comment puis-je composer un numéro de téléphone à partir d'une page web sur iPhone?

RFC3966 définit L'URI standard de L'IETF pour les numéros de téléphone, c'est-à-dire L'URI " tel:". C'est la norme. Il n'y a pas de norme similaire qui spécifie " callto:", c'est une convention particulière pour Skype sur les plateformes où is permet d'enregistrer un gestionnaire URI pour le supporter.

cela a fonctionné pour moi:

1.faire un lien conforme aux normes:

        <a href="tel:1500100900">

2.remplacez-le lorsque le navigateur mobile n'est pas détecté, pour skype:

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

sélectionner link pour remplacer via class semble plus efficace. Bien sûr, il ne fonctionne que sur les ancres de la classe .phone .

Je l'ai mis dans la fonction if( !isMobile() ) { ... donc il déclenche seulement quand détecte le navigateur de bureau. Mais celui-ci est probablement obsolète...

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

j'ai utilisé tel: pour mon projet.

il a travaillé dans Chrome, Firefox, IE9&8, Chrome mobile et le navigateur mobile sur mon smartphone Sony Ericsson.

mais callto: ne fonctionnait pas dans les navigateurs mobiles.

bien que Apple recommande tel: dans leurs docs pour le Safari Mobile, actuellement (iOS 4.3) il accepte callto: de la même façon. Donc je recommande d'utiliser callto: sur un site web générique car il fonctionne à la fois avec Skype et iPhone et je m'attends à ce qu'il fonctionnera sur les téléphones Android, aussi.

Mise À Jour (Juin 2013)

il s'agit toujours de décider ce que vous voulez que votre page Web offre. Sur mes sites web Je fournis à la fois tel: et callto: liens (ce dernier étiqueté comme étant pour Skype) depuis les navigateurs de bureau sur Mac ne font rien avec tel: liens tandis que mobile Android ne fait rien avec callto: liens. Même Google Chrome avec le plugin Google Talk ne répond pas aux liens tel: . Néanmoins, je préfère offrir les deux liens sur le bureau au cas où quelqu'un a pris la peine d'obtenir tel: liens pour travailler sur leur ordinateur.

si la conception du site dicté que je ne fournisse qu'un lien, j'utiliserais un lien tel: que j'essaierais de changer en callto: sur les navigateurs de bureau.

j'utiliserais tel: (tel que recommandé). Mais pour avoir un meilleur repli/ne pas afficher les pages d'erreur j'utiliserais quelque chose comme ceci (en utilisant 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:");
    }
});

l'hypothèse est, que les navigateurs mobiles qui ont un tampon mobile dans la chaîne userAgent-string ont le support pour le protocole tel: . Pour le reste, nous remplaçons le lien par le protocole callto: pour avoir un repli vers Skype lorsque disponible.

pour supprimer les erreurs-pages pour le(s) Protocole (s) non supporté (s), le lien est ciblé vers une nouvelle iframe cachée.

Malheureusement, il ne semble pas possible de vérifier, si l'url a été chargé avec succès dans l'iframe. Il semble qu'aucun événement d'erreur ne soit déclenché.

étant donné que callto: est par défaut supporté par skype (configuré dans les paramètres Skype), et que d'autres le supportent également, je recommande d'utiliser callto: plutôt que skype: .

à l'aide de jQuery, remplacer tous les numéros de téléphone américains sur la page par les schémas callto: ou tel: appropriés.

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

merci à @jonas_jonas pour l'idée. Nécessite l'excellente fonction findAndReplaceDOMText .

j'utilise le markup normal <a href="tel:+123456">12 34 56</a> et rend ces liens non cliquables pour les utilisateurs de bureau via pointer-events: none;

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

pour les navigateurs qui ne prennent pas en charge les pointeurs-événements (IE < 11), Le clic peut être empêché avec JavaScript (exemple repose sur Modernizr et jQuery):

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