電話番号の表記において、スマホサイトではtelリンクを貼ればタップで発信することができるので便利です。
でも、HTMLソースで電話番号にtelリンクを記述してしまうと、PCサイトの場合は「プロコトルが不明」「開けません」というメッセージが出てしまいます。

レスポンシブ対応サイトでPCサイトとスマホサイトを同じHTMl記述で表現する場合、telリンクをどうするか悩めるところです。

理想は、PCサイトのときはリンクはなく、スマホサイトのときだけリンクする。
これをjQueryを使って簡単に実現する方法をメモ。

HTML

<div class=&quot;tel_link&quot;>078-123-XXXX</div>

jQuery
もちろん、本体の読み込みもお忘れなく。

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel_link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

ユーザエージェントで判断し、「iPhone」「Android」の場合は「.tel_link」で書かれた電話番号から「-（ハイフン）」を取り除いた電話番号にaタグを付与します。

簡単で使えるのでおすすめです。WordPressのサイトにも使えます。