Jak oznaczyć numery telefonów?

Moje wyniki testu:

Callto:

• przeglądarka Nokia: nic się nie dzieje
• Google Chrome: prosi o uruchomienie skype ' a, aby zadzwonić na numer
• Firefox: prosi o wybranie programu do wywołania numeru
• IE: prosi o uruchomienie skype ' a, aby zadzwonić pod numer

Tel:

• przeglądarka Nokia: działa
• Google Chrome: nic się nie dzieje
Firefox: "Firefox nie wie, jak otworzyć ten adres url" [8]}
• IE: nie można znaleźć adresu url

Najlepiej zacząć od tel:, który działa na wszystkich telefonach

Następnie umieść ten kod, który będzie działał tylko wtedy, gdy na pulpicie, i tylko wtedy, gdy link jest kliknięty.

Używam http://detectmobilebrowsers.com/ aby wykryć przeglądarki mobilne, możesz użyć dowolnej metody

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

Tel: działa na wszystkich telefonach, aby otworzyć dialer z numerem

Callto: działa na komputerze, aby połączyć się ze skype od firefox, chrome

Jak można się spodziewać, wsparcie WebKit tel: obejmuje również przeglądarkę mobilną z Androidem-FYI

zachowuję tę odpowiedź dla celów "historycznych", ale już jej nie polecam. Zobacz odpowiedź @ Sidnicious powyżej i mój Update 2.

Ponieważ wygląda to na remis między callto i Tel facetów, chcę wrzucić możliwe rozwiązanie w nadziei, że Twoje komentarze wprowadzą mnie z powrotem na drodze światła; -)

Używając callto:, ponieważ większość klientów desktopowych poradzi sobie z tym:

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

Następnie, jeśli klientem jest iPhone, zastąp linki:

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

Wszelkie zastrzeżenia wobec To rozwiązanie? Czy powinienem zacząć od tel:?

Mobile Safari (iPhone & iPod Touch) użyj schematu tel:.

Jak wybrać numer telefonu ze strony internetowej na iPhonie?

RFC3966 definiuje standardowy URI IETF dla numerów telefonów, czyli URI ' tel:'. To standard. Nie ma podobnego standardu określającego " callto:", jest to szczególna konwencja dla Skype ' a na platformach, gdzie is umożliwia rejestrację obsługi URI, aby ją obsługiwać.

To mi pomogło:

1.link zgodny ze standardami:

        <a href="tel:1500100900">

2.zastąp go, gdy przeglądarka mobilna nie zostanie wykryta, dla skype:

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

Wybranie linku do zastąpienia przez klasę wydaje się bardziej efektywne. Oczywiście działa tylko na anchorach z klasą .phone.

Umieściłem go w funkcji if( !isMobile() ) { ... więc uruchamia się tylko wtedy, gdy wykryje przeglądarkę. Ale ten jest prawdopodobnie przestarzały...

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

Użyłem tel: do mojego projektu.

Ale callto: nie działa w przeglądarkach mobilnych.

Chociaż Apple zaleca tel: w swoich dokumentach dla mobilnego Safari, obecnie (iOS 4.3) akceptuje callto: tak samo. Dlatego polecam używanie callto: na ogólnej stronie internetowej, ponieważ działa zarówno ze Skype ' em, jak i iPhonem i spodziewam się, że będzie działać również na telefonach z Androidem.

Aktualizacja (Czerwiec 2013)

To wciąż kwestia decyzji, co chcesz, aby Twoja strona internetowa oferowała. Na moich stronach internetowych podaję zarówno tel:, jak i callto: linki (ten ostatni oznaczony jako dla Skype), ponieważ przeglądarki desktopowe na Macu nie rób nic z linkami tel:, podczas gdy mobilny Android nie robi nic z linkami callto:. Nawet Google Chrome z wtyczką Google Talk nie odpowiada na linki tel:. Mimo to wolę oferować oba linki na pulpicie na wypadek, gdyby ktoś zadał sobie trud uzyskania tel: linków do pracy na swoim komputerze.

Jeśli projekt strony nakazywał, że podaję tylko jeden link, użyłbym linku tel:, który starałbym się zmienić na callto: w przeglądarkach desktopowych.

Użyłbym tel: (zgodnie z zaleceniami). Ale aby mieć lepszy fallback / nie wyświetlać stron błędów użyłbym czegoś takiego (używając 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:");
    }
});

Zakłada się, że przeglądarki mobilne, które mają stempel mobilny w ciągu userAgent-string, mają wsparcie dla protokołu tel:. Dla reszty zamieniamy łącze na protokół callto:, aby mieć zapasowy dostęp do Skype ' a, jeśli jest dostępny.

Aby wyłączyć strony błędów dla nieobsługiwanych protokołów, link jest kierowany do nowego ukrytego iframe.

Niestety nie wydaje się możliwe sprawdzenie, czy adres URL został załadowany pomyślnie w ramce iframe. Wydaje się, że nie są wywoływane żadne zdarzenia błędów.

Ponieważ {[0] } jest domyślnie obsługiwane przez skype( skonfigurowany w ustawieniach Skype), a inni również go obsługują, polecam użycie callto: zamiast skype:.

Używając jQuery, Zastąp wszystkie numery telefonów na stronie odpowiednimi schematami callto: lub 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;
        }
    });
});

Podziękowania dla @ jonas_jonas za pomysł. Wymaga doskonałej funkcji findAndReplaceDOMText .

Używam zwykłych znaczników <a href="tel:+123456">12 34 56</a> i sprawiam, że te linki nie są klikalne dla użytkowników desktopów przez pointer-events: none;

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

Dla przeglądarek, które nie obsługują zdarzeń wskaźnikowych (IE

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