Как сделать разметку на телефонных номерах?

Схема tel: была в конце 1990-х годов и задокументирована в начале 2000 г. с помощью RFC 2806 (который был заменен более подробным RFC 3966 в 2004 г.) и продолжает совершенствоваться. Поддержка tel: на iPhone не была произвольным решением.

callto:, хотя и поддерживается Skype, не является стандартом, и его следует избегать, если он не предназначен специально для пользователей Skype.

Мне? Я бы просто начал включать правильно сформированные tel: URI на ваши страницы (без обнюхивания пользовательского агента) и ждать, пока телефоны остального мира наверстают упущенное :).

Пример:

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

Мои результаты тестов:

callto:

• Браузер Nokia: ничего не происходит
• Google Chrome: просит запустить скайп, чтобы позвонить по номеру
• Firefox: просит выбрать программу для звонка на номер
• IE: просит запустить скайп, чтобы позвонить по номеру

тел:

• Браузер Nokia: работает
• Google Chrome: ничего не происходит
• Firefox: «Firefox не знает, как открыть этот URL»
• IE: не удалось найти URL

Лучше всего начать с tel: он работает на всех мобильных телефонах.

Затем введите этот код, который будет запускаться только на рабочем столе и только при нажатии ссылки.

Я использую http://detectmobilebrowsers.com/ для обнаружения мобильных браузеров, вы можете использовать любой метод, который вам больше нравится.

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

Так что в основном вы покрываете все свои базы.

тел: работает на всех телефонах, чтобы открыть номеронабиратель с номером

callto: работает на вашем компьютере для подключения к скайпу из firefox, chrome

Как и следовало ожидать, поддержка tel: в WebKit распространяется и на мобильный браузер Android.

Я сохраню этот ответ для "исторических" целей, но больше не рекомендую его. См. Ответ @Sidnicious выше и мое Обновление 2.

Поскольку это похоже на ничью между ребятами callto и tel, я хочу предложить возможное решение в надежде, что ваши комментарии вернут меня на путь света ;-)

Использование callto:, поскольку большинство настольных клиентов справятся с этим:

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

Затем, если клиент - iPhone, замените ссылки:

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

Есть возражения против этого решения? Мне лучше начать с tel:?

В мобильном Safari (iPhone и iPod Touch) используется схема tel:.

Как набрать номер телефона с веб-страницы на iPhone? < / а>

RFC3966 определяет стандартный URI IETF для телефонных номеров, то есть URI "tel:". Это стандарт. Нет аналогичного стандарта, определяющего callto:, это конкретное соглашение для Skype на платформах, где он позволяет зарегистрировать обработчик URI для его поддержки.

это сработало для меня:

1. сделайте ссылку, соответствующую стандартам:

        <a href="tel:1500100900">

2. заменить его, когда мобильный браузер не определяется, для скайпа:

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

Выбор ссылки для замены через класс кажется более эффективным. Конечно, это работает только с якорями с классом .phone.

Я поместил его в функцию if( !isMobile() ) { ..., поэтому он срабатывает только при обнаружении браузера рабочего стола. Но этот, вероятно, устарел ...

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

Я использовал tel: для своего проекта.

Он работал в Chrome, Firefox, IE9 и 8, Chrome для мобильных устройств и в мобильном браузере на моем смартфоне Sony Ericsson.

Но callto: не работал в мобильных браузерах.

Я бы использовал tel: (как рекомендовано). Но чтобы иметь лучший откат / не отображать страницы ошибок, я бы использовал что-то вроде этого (используя 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:");
    }
});

Предполагается, что мобильные браузеры, которые имеют отметку мобильного устройства в строке userAgent, поддерживают протокол tel:. В остальном мы заменяем ссылку на протокол callto:, чтобы иметь возможность использовать Skype там, где это возможно.

Чтобы подавить страницы ошибок для неподдерживаемых протоколов, ссылка нацелена на новый скрытый iframe.

К сожалению, не представляется возможным проверить, был ли URL-адрес успешно загружен в iframe. Кажется, что никаких ошибок не запускается.

Поскольку callto: по умолчанию поддерживается Skype (настраивается в настройках Skype), а другие также поддерживают его, я бы рекомендовал использовать callto:, а не skype:.

Хотя Apple рекомендует tel: в своей документации для Mobile Safari, в настоящее время (iOS 4.3) она принимает callto: точно так же. Поэтому я рекомендую использовать callto: на обычном веб-сайте, поскольку он работает как со Skype, так и с iPhone, и я ожидаю, что он будет работать и на телефонах Android.

Обновление (июнь 2013 г.)

Это все еще вопрос решения того, что вы хотите, чтобы ваша веб-страница предлагала. На своих веб-сайтах я использую как tel:, так и callto: ссылки (последняя помечена как для Skype), поскольку настольные браузеры на Mac ничего не делают со ссылками tel:, а мобильный Android ничего не делает со ссылками callto:. Даже Google Chrome с подключаемым модулем Google Talk не отвечает на tel: ссылки. Тем не менее, я предпочитаю предлагать обе ссылки на рабочем столе на тот случай, если кто-то позаботился о том, чтобы tel: ссылки работали на своем компьютере.

Если бы дизайн сайта требовал, чтобы я предоставлял только одну ссылку, я бы использовал tel: ссылку, которую я бы попытался изменить на callto: в настольных браузерах.

Используя jQuery, замените все номера телефонов в США на странице соответствующими схемами callto: или 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;
        }
    });
});

Спасибо @jonas_jonas за идею. Требуется отличная функция findAndReplaceDOMText.

Я использую обычную разметку <a href="tel:+123456">12 34 56</a> и делаю эти ссылки неактивными для пользователей настольных компьютеров с помощью pointer-events: none;

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

для браузеров, которые не поддерживают события-указатели (IE ‹11), щелчок можно предотвратить с помощью JavaScript (пример основан на Modernizr и jQuery):

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