スマホのときだけtelリンクを設置する方法

HTML
<img src="tel.png" alt="0123-45-6789"  data-tel="0123-45-6789"/>
（<span data-tel="0123-45-6789">0123-45-6789</span>とかでもOK）


JavaScript
$(document).ready(function () {

    // 実際は初回とウィンドウリサイズ時に実行（※1）
    if ($(window).width() <= 480) {
        $("[data-tel]").each(function(){
            if ($(this).parent().get(0).tagName.toLowerCase() != "a") {
                var tel = $(this).attr("data-tel");
                $(this).wrap("<a href=" + 'tel:' + tel + "></a>");
            }
        });
    } else {
        $("[data-tel]").each(function(){
            if ($(this).parent().get(0).tagName.toLowerCase() == "a") {
                $(this).unwrap();
            }
        });
    }

});


とやると、幅480px以下のときは
HTML
<a href="tel:0123-45-6789"><img src="tel.png" alt="0123-45-6789"  data-tel="0123-45-6789"/></a>


となり、幅480pxより大きいときは


<img src="tel.png" alt="0123-45-6789"  data-tel="0123-45-6789"/>


となります。
480pxが電話機能のついたスマホかどうかは置いておきます。。。

おまけ

※1 初回とウィンドウリサイズ時に実行するスクリプト
JavaScript
$(document).ready(function () {

    var TelLink = (function () {
        var init = function () {
            // 何か処理
        };

        return {
            init: init
        };
    })();

    TelLink.init();                                // 初回
    $(window).resize(function () {      // リサイズ時
        TelLink.init();
    });

});