スマホサイトでは電話番号をタップしたらそのまま電話をかけれる機能は非常に重要なんですが、PCの場合は、それはいらない機能なわけで、レスポンシブサイトの場合は1ソースで対応しているので、安易に「tel:」のhref系を使うのも考えものです。

<a href="tel:00-0000-0000">電話番号</a>

自動的に電話番号にリンクを張ってしまうのを制御する

iPhoneやiPadのSafariで親切設計されている
電話番号っぽい数字があったら自動的にリンクを張ってくれる機能は便利なんですが数桁の数字も全て自動判別されてしまいます。（数字だけの商品コードとか）
なので、＜head＞部分に以下のmeta情報を追加

<meta name="format-detection" content="telephone=no">

これで、電話番号が自動的にリンクされるのを防ぎます。

【1】ユーザーエージェントで切り替える。

HTMLは以下のような感じで書きます。

<!--テキストリンクの場合-->
<p class="js-tel">000-000-000</p>

<!--画像の場合-->
<p class="js-tel"><img src="img/tel.png" alt="000-000-000"></p>

画像の場合はalt部分に電話番号を記述します。

if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
  $(function() {
    $('.js-tel').each(function() {
      var str = $(this).html();
      if ($(this).children().is('img')) {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
      } else {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
      }
    });
  });
}

これで、スマホの時はこんな感じでHTMLが追加されます。

<p class="js-tel"><a href="tel:000000000">000-000-000</a></p>

<p class="js-tel"><a href="tel:000000000"><img src="img/tel.png" alt="000-000-000"></a></p>

【2】data属性をjQueryで紐付ける。

HTMLはこんな感じ

<!--テキストリンクの場合-->
<span data-action="js-tel" data-tel="000-000-000">電話はこちらへ</span>

<!--画像の場合-->
<span data-action="js-tel" data-tel="000-000-000"><img src="img/tel.png" alt="電話"></span>

data-telの中に電話番号を書きます。

$(function() {
    if (!isPhone())
        return;

    $('span[data-action=js-tel]').each(function() {
        var $ele = $(this);
        $ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>');
    });
});

function isPhone() {
    return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}

これで、スマホの時はこんな感じでHTMLが追加されます。

<a href="tel:000-000-000">
  <span data-action="js-tel" data-tel="000-000-000">電話はこちらへ</span>
</a>

<a href="tel:000-000-000">
  <span data-action="js-tel" data-tel="000-000-000"><img src="img/tel.png" alt="電話"></span>
</a>

参考サイト

• スマホで閲覧時のみ、電話番号にtel:リンクを追加する
• レスポンシブデザインで気をつけたい、電話番号の扱い