JS:telリンクをスマホの時だけ有効化

レスポンシブサイトで、スマホ表示のときだけtelリンクを有効化したいとき、cssでやるのもいいですがソースが汚れるだけなので、おとなしくscriptで実現しましょう。

あ、当然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>'));
        });
    }
});

で、こんな感じでソースを書きますね。

<p>
お問い合わせ：<span class="tel-link">00-0000-0000</span>
</p>

あとはお好みでcssを書いちゃってください。以上。