スマホで閲覧したときには電話番号タップで電話をかけられるようにしたい。
でも、ただリンクを貼っただけだとPCで閲覧したときには「開けません」などのメッセージが表示されてしまいます。
スマホで閲覧したときにだけ電話番号へのリンクを追加するようにすると便利です。

調べた中ではjQueryでの実装が記述もシンプルで分かりやすかったです。

サンプル

JavaScriptでUserAgentを取得してスマホからのアクセスかを判別し、class名（tel）が指定された画像やテキストの周りをaタグ（<a href="tel:0120111111"></a>）で囲んでいます。

<!-- 画像でリンク -->
<img src="img/tel.png" alt="フリーコール：0120111111" class="tel">

<!-- テキストでリンク -->
<span class="tel">フリーコール：0120111111</span>

<script>
    $(function(){
    	var device = navigator.userAgent;
    	if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
    		$(".tel").wrap('<a href="tel:0120111111"></a>');
    	}
    });
</script>

サンプル（電話番号が複数の場合）

電話番号が複数ある場合は、電話番号ごとにclass名を設定します。

<img src="img/tel.png" alt="0120111111" class="tel1">
<img src="img/tel.png" alt="0120222222" class="tel2">

<script>
    $(function(){
    	var device = navigator.userAgent;
    	if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
    		$(".tel1").wrap('<a href="tel:0120111111"></a>');
    		$(".tel2").wrap('<a href="tel:0120222222"></a>');
    	}
    });
</script>

参考サイト

スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript（jQuery） : code14