Как пометить номера телефонов?

Ответ 1

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

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

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

Пример:

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

Ответ 2

Результаты моих тестов:

callto:

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

тел:

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

Ответ 3

Лучше всего начать с 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:'));
    });
}

Итак, в основном вы охватываете все свои базы.

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

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

Ответ 4

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

Ответ 5

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

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

Использование 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:?

Ответ 6

Mobile Safari (iPhone & iPod Touch) использует схему tel:.

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

Ответ 7

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

Ответ 8

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

1.Выполните ссылку, соответствующую стандарту:

        <a href="tel:1500100900">

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

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

Ответ 9

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

Он работал в Chrome, Firefox, IE9 & 8, Chrome mobile и мобильном браузере на моем смартфоне Sony Ericsson.

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

Ответ 10

Я бы использовал 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. Кажется, что никаких ошибок не происходит.

Ответ 11

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

Ответ 12

Хотя 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: на настольных браузерах.

Ответ 13

Используя 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.

Ответ 14

Я использую обычную разметку <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;
    });
}