電話番号をマークアップする方法は？

HTML文書で電話番号を呼び出し可能なリンクとしてマークアップしたい。私はマイクロフォーマットのアプローチを読みましたが、このtel:スキームは標準的なものですが、文字通りどこにも実装されていません。

Skypeは、私の知る限り、そして後者はある程度の人気を得ているskype:と定義していますcallto:。私は、他の企業が他の計画を持っているか、callto:電車に乗っていると思います。

電話番号をマークアップして、VoIPソフトウェアを使用するできるだけ多くの人がリンクをクリックするだけで電話を受けることができるようにするためのベストプラクティスは何でしょうか。

おまけの質問：米国の911やドイツの110などの緊急電話番号の合併症について誰か知っていますか？

乾杯、

更新： Microsoft NetMeetingはcallto:、WinXPでスキームを採用しています。この質問は、Microsoft Office Communicatorはtel:スキームを処理するがスキームは処理しないことを示唆していcallto:ます。すばらしい、レドモンド！

更新2： 2年半後の現在。数字でやりたいことまで煮詰めているようです。モバイルのコンテキストでtel:は、進むべき道です。デスクトップをターゲットにするかどうかは、Skypeユーザーが多い（callto:）か、Google Voice（tel:）などがインストールされている可能性が高いと思われる場合は、あなた次第です。私の個人的な意見は、疑わしい場合はtel:（@Sidnicious 'の回答に沿って）使用することです。

更新3：ユーザー@ rybo111によると、ChromeのSkypeはその間、急成長していtel:ます。手元に両方のマシンがないため、これを確認することはできません。tel:

このtel:スキームは1990年代後半に使用され、 2000年初頭にRFC 2806で文書化され（2004年に完全なRFC 3966によって廃止されました）、引き続き改善されています。tel:iPhoneでのサポートは恣意的な決定ではありませんでした。

callto:は、Skypeでサポートされていますが、標準ではないため、 Skypeユーザーを特に対象とする場合を除いて、使用しないでください。

私？tel:（ユーザーエージェントを盗聴することなく）ページに適切な形式のURI を含め始め、世界中の他の電話が追いつくのを待ちます:)。

例：

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

私のテスト結果：

に呼び出します：

• Nokia Browser：何も起こりません
• Google Chrome：番号を呼び出すためにスカイプを実行するように求めます
• Firefox：番号を呼び出すプログラムを選択するように求めます
• IE：番号を呼び出すためにスカイプを実行するように求めます

tel：

• Nokia Browser：機能
• 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:'));
    });
}

つまり、基本的にすべての拠点をカバーします。

tel：すべての電話で機能し、番号のダイヤラーを開きます

callto：コンピューターでFirefox、ChromeからSkypeに接続します

ご想像のとおり、WebKitのサポートはtel:Androidモバイルブラウザーにも拡張されます-FYI

私はこの回答を「歴史的な」目的で保持しますが、これ以上お勧めしません。上記の@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:ですか？

Mobile Safari（iPhoneおよびiPod Touch）はこのtel:スキームを使用します。

iPhoneのWebページから電話番号をダイヤルするにはどうすればよいですか？

RFC3966は、電話番号のIETF標準URI、つまり「tel：」URIを定義しています。それが標準です。「callto：」を指定する同様の標準はありません。これは、がURIハンドラーを登録してサポートするプラットフォームでのSkypeの特定の規則です。

これは私のために働きました：

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

私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-stringにモバイルスタンプがあるモバイルブラウザーがtel:プロトコルをサポートしていることです。残りについては、リンクをcallto:プロトコルに、利用可能な場合はSkypeにフォールバックします。

サポートされていないプロトコルのエラーページを抑制するために、リンクは新しい非表示のiframeをターゲットにしています。

残念ながら、URLがiframeに正常にロードされているかどうかを確認することはできないようです。エラーイベントが発生しないようです。

以来callto:（Skypeの設定で設定）スカイプでサポートされているデフォルトのあたりにあり、そして他の人もそれをサポートしていない、私が使用することをお勧めしますcallto:ではなくskype:。

Apple tel:は彼らのドキュメントでMobile Safariを推奨していますが、現在（iOS 4.3）、callto:まったく同じものを受け入れます。だから私はcallto:、SkypeとiPhoneの両方で機能する一般的なWebサイトでのます。また、Androidフォンでも機能することを期待しています。

更新（2013年6月）

これは、Webページに何を提供するかを決定する問題です。私のWebサイトでは、Macのデスクトップブラウザーはリンクに対して何もせず、モバイルAndroidはリンクに対して何もしないので、両方tel:とcallto:リンク（後者はSkype向けとラベル付けされています）を提供tel:しcallto:ます。Googleトークプラグインを備えたGoogle Chromeでもtel:リンクに応答しません。それでも、誰かがトラブルに巻き込まれた場合に備えて、デスクトップに両方のリンクを提供することを好みますtel:自分のコンピューターでリンクを機能させるます。

サイトの設計でリンクを1つだけ指定するように指示されている場合は、デスクトップブラウザーでtel:変更しようとするリンクを使用しcallto:ます。

jQueryを使用して、ページ上のすべての米国の電話番号を適切なcallto:or 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;
    });
}